微信小程序入门
注册安装流程
- 首先去 “微信公众平台” 官网注册，注册完然后把 AppID 保存好
- 去官网下载 “微信开发者工具”，安装完打开
- 微信开发者工具插件推荐（Prettier，WXML）
[{"url":"https://image-1309791158.cos.ap-guangzhou.myqcloud.com/其他/202205310858725.png","alt":""},{"url":"https://image-1309791158.cos.ap-guangzhou.myqcloud.com/其他/202205310858894.png","alt":""}]
小程序的配置文件
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是 全局的 app.json 和 ⻚⾯⾃⼰的 page.json
全局配置app.json
app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置
字段的含义：
pages字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。- 完整的配置信息请参考app.json配置
页面配置page.json
- 这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。
- 开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
- ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项
注意：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，具体的可以参考page.json配置
sitemap配置（了解）
小程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引，如果没有 sitemap.json ，则默认为所有页面都允许被索引，具体看文档：sitemap配置
创建一个页面
- 方法1：在左边栏右键创建
-
方法2：在 app.json里的
pages字段写入路径按保存自动生成如果想在进入小程序时显示的页面是 home，则可以在
pages字段里调整路径的顺序调到第一去
- 方法3：首先到小程序项目的路径下，右键选择【通过 code打开】，然后就可以在
vs code上编写代码了，注意新增页面后需要到微信开发者工具里保存刷新才能看到新增的页面
[{"url":"https://image-1309791158.cos.ap-guangzhou.myqcloud.com/其他/202205310922613.png","alt":""},{"url":"https://image-1309791158.cos.ap-guangzhou.myqcloud.com/其他/202205302137708.jpg","alt":""},{"url":"https://image-1309791158.cos.ap-guangzhou.myqcloud.com/其他/202205302143857.jpg","alt":""}]
全局配置
-
通过查看文档可以知道全局配置是怎么配置的：[全局配置](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html# 全局配置)
-
window（设置小程序的状态栏、导航条、标题、窗口背景色）（颜色对照表） -
tabBar（客户端窗口的底部或顶部有 tab 栏可以切换页面）图标不支持
网络路径，只能是本地路径，所以需要创建一个文件存放图标（大小限制为 40kb,建议尺寸为 81px * 81px） -
小技巧：按【ALT】选中几个可以同时修改
-
小技巧：按【ALT】+【方向键】选中代码可以实现上下移动
-
注意：
pages字段第一个要和tabBar字段第一个相同
app.json
{
"pages": [
"pages/index/index",
"pages/home/home"
],
"window": {
"navigationBarBackgroundColor": "# bed742", //导航栏背景颜色,只能这种"# "格式
"navigationBarTextStyle": "white", //名字颜色，只能black,white
"navigationBarTitleText": "旺仔牛奶糖", //名字
"backgroundTextStyle":"dark", //下拉 loading 的样式，仅支持 dark / light
"enablePullDownRefresh":true, //true:开启下拉刷新
"backgroundColor":"# afb4db" //这个是下拉刷新的背景颜色,只能这种"# "格式
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "imga/icon/_home.png", //未选中时的图标
"selectedIconPath": "imga/icon/home.png" //选中时的图标
},
{
"pagePath": "pages/img/img",
"text": "图库",
"iconPath": "imga/icon/_img.png",
"selectedIconPath": "imga/icon/img.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "imga/icon/_my.png",
"selectedIconPath": "imga/icon/my.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "imga/icon/_search.png",
"selectedIconPath": "imga/icon/search.png"
}
],
"color":"# 9d9087", //未选中时字体的颜色
"selectedColor": "# f47920", // 选中时的字体颜色
"backgroundColor": "# bed742", //tab 的背景色
"borderStyle":"black", //tabbar 上边框的颜色， 仅支持 black / white
"position":"bottom" //tabBar 的位置，仅支持 bottom / top,默认是bottom
}
}注意：json 里不能有注释！！！（方便以后查看所以我在文章代码里注释了）
页面配置文件
- 配置各个页面的外观名字等，直接复制全局配置 app.json 里
window属性即可 - 下面是配置
img页面的示例，其他页面也是这样操作即可
img.json
{
"usingComponents": {},
"navigationBarBackgroundColor": "# bed742",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的图片",
"backgroundTextStyle":"dark",
"enablePullDownRefresh":true,
"backgroundColor":"# afb4db"
}
模板语法
text相当于以前web中的 span标签 行内元素 不会换行view相当于以前web中的 div标签 块级元素 会换行checkbox以前web的复选框标签
dema1.wxml
<!-- pages/demo1/demo1.wxml --><!-- -->
<!-- 1.字符串 -->
<view> {{msg}} </view> <!-- 两个{}，里面填写data类型 -->
<!-- 2.数字类型 -->
<view> {{num}} </view>
<!-- 3.bool类型 -->
<view> 是不是傻逼：{{isGirl}} </view>
<!-- 4.object类型 -->
<view> {{person.age}} </view>
<view> {{person.height}} </view>
<view> {{person.weight}} </view>
<view> {{person.name}} </view>
<!-- 5.在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性 </view>
<!-- 6.使用bool类型充当属性
注意：字符串和花括号之间不要存在空格，否则会导致识别失败
以下是错误示范：<checkbox checked=" {{ischecked}}"></checkbox>
-->
<view>
<checkbox checked> </checkbox><!-- 表示复选框选中状态 -->
<checkbox checked="{{ischecked}}"></checkbox><!-- 等同上面 -->
</view>demo1.js
Page({
data:{
msg:"Hello World", //变量名自定义，字符串类型
num:12345, //数字类型
isGirl:false, //bool类型
person:{ //对象类型
age:74,
height:180,
weight:200,
name:"富婆"
},
ischecked:false //复选框判断
}
})
运算
demo1.wxml
<!-- 运算=>表达式
1.可以在花括号中加入表达式 -- "语句"
2.表达式
指的是一些简单运算，数字运算，字串符拼接，逻辑运算。。。
3.语句
<1>复杂的代码段
<2>if else
<3>Switch
<4>do while...
<5>for...
-->
<view>{{1+1}}</view> <!-- 输出2 -->
<view>{{'1'+'1'}}</view> <!-- 输出11 -->
<!-- 注意：===：严格等于不仅值相等类型也要相等 -->
<view>{{11%2===0 ? '偶数' : '奇数'}}</view> <!-- 输出奇数 -->数组和对象循环
demo1.js
Page({
data:{
msg:"Hello World", //变量名自定义，字符串类型
num:12345, //数字类型
isGirl:false, //bool类型
person:{ //对象类型
age:74,
height:180,
weight:200,
name:"富婆"
},
ischecked:false,
list:[
{
id:0,
name:"孙悟空"
},
{
id:1,
name:"猪八戒"
},
{
id:2,
name:"悟能"
}
]
}
})demo1.wxml
<!-- 8.列表循环
1.wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2.wx:key="唯一的值" 用来提高列表渲染的性能
<1>wx:key 绑定一个普通的字符串时，那么这个字符串名称就是循环数组中的对象的唯一属性（相当于主键）
<2>wx:key="*this" 表示 你的数组是一个普通的数组 *this 表示是循环项 如[1,2,3,44,5]
3.当出现 数组的嵌套循环时尤其注意以下绑定的名称不要重名
wx:for-item="item" wx:for-index="index"
4.默认情况下我们不写上面这句，只有一层循环的话可以省略
-->
<view>
<view
wx:for="{{list}}" wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</view>
</view>
<!-- 9.对象循环
1.wx:for="{{对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2.循环对象时最好把 item和index的名称都修改一下
wx:for-item="value" wx:for-index="key"
-->
<view>
<view>对象循环</view>
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age"> <!-- 因为对象里面每一个值都是唯一的所以随便给一个就行 -->
属性:{{key}}
--
值:{{value}}
</view>
</view>
block标签和条件渲染
<!-- 10.block标签
1.占位符的标签
2.写代码可以看到这标签存在，页面渲染时会被移除掉
-->
<view>
<block
wx:for="{{list}}" wx:key="id" class="my_list">
索引:{{index}}
--
值:{{item.name}}
</block>
</view><!-- 11.条件渲染
1.wx:if="{{true/false}}"
<1>if,else,elif
2.hidden（实现显示或者隐藏）
<1>在标签上直接加属性
<2>hidden="{{true}}"
3.什么场景下用哪个？
<1>当标签不是频繁的切换显示，优先使用 wx:if
直接把标签从页面结构给移除掉
<2>当标签频繁的切换显示时，优先使用 hidden
通过添加样式的方式来切换显示
hidden属性不要和display一起使用
-->
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view> <!-- 为真显示 -->
<view wx:if="{{false}}">隐藏</view> <!-- 为假隐藏 -->
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
</view>
<view>----------------</view>
<view hidden>hidden1</view>
<view hidden="{{false}}">hidden2</view>
<view>--------888-------</view>
<view wx:if="{{false}}">111</view>
<view hidden>222</view>
<view hidden style="display: flex;">小苗</view>
- 条件渲染：在框架中，使用
wx:if=""来判断是否需要渲染该代码块 wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏- 通过查看元素可以知道
hidden是通过添加none样式进行隐藏 - 如果需要频繁切换的情景下，用
hidden更好，如果在运行时条件不大可能改变则wx:if较好
hidden属性不要和display一起使用
事件绑定
input组件是输入框，type是input的类型，默认是text类型 文档：inputbindinput绑定监听事件，可以监听到当前输入框的值，通过e.detail.value可以获取到input的值，return返回的字符串可以替换掉输入的字符串console.log()函数是将 “内容” 输出在控制台上，方便调试
demo1.js
e就是源对象
- 通过
e.detail.value来获取输入的值 - 然后注意一下赋值写法，用到
setData
Page({
data:{
num:0
},
//输入框的input时间的执行逻辑
handleInput(e){
//console.log(e.detail.value);
this.setData({
num:Number(e.detail.value) //注意需要转换为数值
})
},
//+ - 按钮的事件
handletap(e){
//console.log(e);
//获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num:this.data.num + operation
})
}
})demo1.json
- 事件可以将用户的
行为反馈到逻辑层进行处理，关于事件详解见文档：[事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html# 事件的使用方式) - 这里使用
bindtap来进行点击事件 button是按钮标签，详解见文档：button- 注意不能像下面那样赋值，
方法=函数名
- 关于事件绑定的传参问题不能直接传参，需要自定义属性的方式进行传参
data-是自定义属性，组件上触发的事件时，会发送给事件处理函数data-operation是自定义的属性，需要注意的是data-operation=“1"是传字符类型，data-operation=”{{1}}"是传数值类型- 获取自定义属性
operation（一步步通过控制台知道值在哪） - const operation=e.currentTarget.dataset;
- 注意：因为
input默认是string类型， 所以需要用Number()函数转换输入的值（你不输入则数值正常加或者减，但是一旦输入数字再按加或减就会变成字符串拼接形式）菜鸟教程：JavaScript Number() 函数
<!--
1.需要给 input标签绑定 input事件
绑定关键字 bindinput
2.如何获取 输入框的值:
通过事件源对象来获取
e.detail.value
3.把输入的值 赋值到 data中
不能直接这样写：
this.data.num=e.detail.value
this,num=e.detail.value
正确写法：
this.setData({
num:e.detail.value
})
4.需要加入一个点击事件
bindtap
<1>通过自定义属性的方式来传参
<2>在事件源中获取 自定义属性
-->
<input type="text" bindinput="handleInput" /> <!-- 注意后面有结束符/ handleInput是事件名-->
<!-- 不能直接写参数 handletap(1)或者handletap(-1)，这样系统会变成这样调用
：handletap(1)(num){} 改变了原来的名字会找不到的
-->
<button bindtap="handletap" data-operation="{{1}}">+</button> <!-- 加入按钮 -->
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
样式WXSS
尺寸单位
rpx：可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx，如在 iPhone6上，屏幕宽度为375px，共有750物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素
-
使⽤步骤：
① 确定设计稿宽度
pageWidth
② 计算⽐例750rpx = pageWidth px,因此1px = 750rpx/pageWidth
③ 在less⽂件中，只要把设计稿中的px=>750/pageWidth rpx即可 -
计算公式：
calc(750rpx*被适配的元素/机型像素单位)注意：
750和rpx中间不要留空格，运算符两边要留空格 -
calc()函数用于动态计算长度值，菜鸟教程：CSS calc（） 函数 -
margin是指从自身边框到另一个容器边框之间的距离，就只是容器外距离。 -
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
demo1.wxss
/*
1.小程序中不需要自动来引入样式文件
2.需要把页面某个元素的单位由 px 改成 rpx
<1>设计稿 750px
750px=750rpx
1px=1rpx
<2>把屏幕宽度改成 375px
375px=750rpx
1px=2rpx
1rpx=0.5px
3.存在一个设计稿 宽度 414 或者 未知page
<1>设计稿page 存在一个元素宽度100px，假设page=375
<2>拿以上需求去实现不同宽度的页面适配
公式：calc(750rpx*被适配的元素/机型像素单位)
注意：不能漏了calc()
*/
/* 不建议写死view，当前只是示例 */
view{
width: calc(750rpx * 100 / 375);
height: 200rpx;/*1rpx=0.5px，所以这里是100px*/
font-size: 40rpx;
background-color: aquamarine;
}
样式导入
- 在
wxss中⽀持样式直接导⼊功能，也可以和less中的导⼊混⽤ - 使⽤
@import语句可以导⼊外联样式表，只⽀持相对路径
/* 引入代码是通过 @import 来引入的，只支持相对路径 */
@import "../../style/common.wxss"; /* 第一个../是退出当前demo1.wxss，第二个../是退出demo1文件夹 */
选择器和使用less
- 特别需要注意的是 ⼩程序 不⽀持通配符
*因此以下代码⽆效！ 菜鸟教程：CSS 选择器
*{
margin:0;
padding:0;
box-sizing:border-box;
}- ⽬前⽀持的选择器有：
-
原⽣⼩程序不⽀持
less，其他基于⼩程序的框架⼤体都⽀持，如wepy，mpvue，taro 等。 但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现：① 在
VS Code里安装插件easy less② 在
VS code设置 settings.json 里添加以下代码：
"less.compile": {
"outExt": ".wxss"
}
③ 在要编写样式的地方，新建 less 文件，如 demo1.less ，然后正常编辑即可
常见组件
view和text标签
-
view标签，见文档：view -
text标签，见文档：text① ⽂本标签
② 只能嵌套
text③ ⻓按⽂字可以复制（只有该标签有这个功能）
④ 可以对空格，回⻋进⾏编码
-
HTML特殊符号对照表：HTML特殊符号对照表，这里面不是所有decode都可以解码，可以参考文档Bug & Tip那
<!--
1.长按复制 user-select
<1>selectable已经弃用
<2>需要加属性decode解码才能用 
-->
<text user-select decode>text 123<</text>
image标签
- 图片一般使用
外链的方式引入，支持JPG、PNG、SVG、WEBP、GIF等格式，不使用绝对路径，我目前使用的是去不图床 image组件默认宽度320px、高度240pximage组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
待更新
艹了，压力大没时间搞小程序，还有蓝桥杯单片机，高数，英语，数据结构等等等等要学，只要我还没挂我还有希望继续学小程序！！