起步
申请账号
进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
登录 小程序后台 ,我们可以在菜单 “开发管理”-“开发设置” 看到小程序的 AppID 了 。
小程序的 AppID 相当于小程序平台的一个身份证
安装开发工具
前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装
代码构成
结构 | 传统web | 微信小程序 |
---|---|---|
结构 | HTML | WXML |
样式 | CSS | WXSS |
逻辑 | JavaScript | JavaScript |
配置 | 无 | JSON |
.json
后缀的JSON
配置文件.wxml
后缀的WXML
模板文件.wxss
后缀的WXSS
样式文件.js
后缀的JS
脚本逻辑文件
配置文件
全局配置
**app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"pages":[
// 排在首位的是小程序的首页
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
}
}
pages
字段 —— 页面路径列表window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等tabBar
字段 —— 底部 tab 栏的表现
其他配置项细节可以参考文档 小程序的配置 app.json
页面配置
每一个面下的 .json
文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json
的 window
中相同的配置项。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
完整配置项说明请参考小程序页面配置
sitemap 配置
小程序根目录下的 sitemap.json
文件用来配置小程序及其页面是否允许被微信搜索到。
完整配置项说明请参考小程序 sitemap 配置
WXML 语法
数据绑定
WXML 中的动态数据均来自对应 Page 的 data
数据绑定使用 Mustache 语法(双大括号)将变量包起来
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
wx:for
在组件上使用 wx:for
控制属性绑定一个数组或对象,即可使用数组或对象中各项的数据重复渲染该组件
默认当前项的下标(对象中是 key)变量名默认为 index
,当前项(对象中是 value)的变量名默认为 item
<view wx:for="{{array}}">
{{index}} : {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item
可以指定数组当前元素的变量名,
使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for
也可以嵌套,下边是一个九九乘法表:
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
当嵌套循环时需要修改项的下标和当前项的变量名
循环对象时修改项的下标和当前项的变量名可以使代码可读性更高
<view wx:for="{{object}}" wx:for-index="key" wx:for-item="value">
属性:{{key}} -- 值:{{value}}
</view>
wx:key
与 vue 中的 :key
一样,需要使用 wx:key
来指定列表中项目的唯一的标识符,不设置时 wx:for
会报警告(如果数据不会发生变化,不提供也没有影响)
wx:key
的值以两种形式提供:
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字
block wx:key
可以将 wx:for
用在 <block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">索引:{{index}} -- 值:{{item}}</block>
渲染后:
<page>
"索引:0 -- 值:1"
"索引:1 -- 值:2"
"索引:2 -- 值:3"
</page>
条件渲染
wx:if
在框架中,使用 wx:if="Boolean"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
来添加一个 else
块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
wx:if
与 Vue 中的 v-if
相似,都是惰性的
hidden
在框架中,使用 hidden="Boolean"
来判断是否显示该代码块,默认为 true
<view hidden>隐藏1</view>
<view hidden="{{true}}">隐藏2</view>
<view hidden="{{false}}">显示</view>
hidden
和 Vue 中的 v-show
相似,只是将 dipsplay
属性设置了 none
注意: hidden
不要和样式 display
一起使用,会被覆盖
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
事件绑定
不同的组件支持不同的事件,具体看组件说明
bindinput
键盘输入时触发
<input type="text" bindinput="handleInput" />
在 .js
文件中设置事件触发函数
page({
data: {
num: 0
},
// 通过事件源对象 e 来获取 input 输入框的值
handleInput(e) {
this.setData({
num: e.detail.value
})
}
})
bindtap
点击时触发
<button bindtap="handleTap"></button>
绑定事件不能带参数,如果要传参,需要使用 data-
自定义属性
<button bindtap="handleTap" data-operation="{{1}}"></button>
通过事件源对象获取参数
page({
data: {
num: 0
},
// 通过事件原对象 e 来获取 input 输入框的值
handleTap (e) {
const operation = e.currentTarget.dataset.operation
this.setData({
// 获取数据需要用 this
num: this.data.num + operation
})
},
})
WXSS 语法
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML
的组件样式
与 CSS 相比,WXSS 扩展的特性有:
- 响应式长度单位
rpx
- 样式导入
- 不需要主动引入样式文件(会自动寻找同名样式文件)
尺寸单位
rpx(responsive pixel) : 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx
。如在 iPhone6
上, 屏幕宽度为 375px
,共有 750 个物理像素,则 750rpx = 375 物理像素,1rpx = 0.5px = 1 物理像素
设备 | rpx 换算 px(屏幕宽度/750) | px 换算 rpx(750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
使用步骤:
- 确定设计稿宽度 pageWidth
- 计算比例
750rpx = pageWidth px
,因此1px = 750rpx/pageWidth
- 在 less 文件中,只要把设计稿中的
px
=>750/pageWidth rpx
即可 - 或者使用
calc()
进行计算
样式导入
wxss 中直接就⽀持,样式导⼊功能
也可以和 less 中的导⼊混⽤
使⽤ @import
语句可以导⼊外联样式表,只⽀持相对路径
示例代码:
/* common.wxss */
.small-p {
padding: 5px;
}
/* app.wxss */
@mport "common.wxss";
.middle-p {
padding: 15px;
}
选择器
特别要注意的是,小程序不支持通配符 *
,因此以下代码无效:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro |
选择所有拥有 class="intro" 的组件 |
#id | #firstName |
选择拥有 id="firstName 的组件 |
element | view |
选择所有 view 组件 |
element, element | view, checkbox |
选择所有文档的 view 组件和所有的 checkbox 组件 |
nth-child(n) | view:nth-child(n) |
选择某个索引的标签 |
::after | view::after |
在 view 组件后边插入内容 |
::before | view:before |
在 view 组件前边插入内容 |
生命周期
分为应⽤⽣命周期和⻚⾯⽣命周期
关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节
应用生命周期
指的是小程序入口文件,也就是 app.js
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onLaunch | function | 否 | 监听⼩程序初始化 | |
onShow | function | 否 | 监听⼩程序启动或切前台 | |
onHide | function | 否 | 监听⼩程序切后台 | |
onError | function | 否 | 错误监听函数,形参中记录着错误信息 | |
onPageNotFound | function | 否 | ⻚⾯不存在监听函数 |
App({
onLaunch() {
// 在应用第一次启动的时候,获取用户的个人信息
},
onShow() {
// 对应用的数据或者页面效果重置
},
onHide() {
// 暂停或者清除计时器
},
onError(err) {
// 在应用发生代码报错的时候,收集用户的错误信息,通过异步请求,将错误的信息发送后台
console.log(err)
},
// 应用第一次启动的时候,如果找不到第一个入口页面,才会触发
onPageNotFount() {
// 如果页面不存在了,通过 js 的方式来重新跳转页面
}
})
页面生命周期
属性 | 类型 | 说明 |
---|---|---|
data | Object | ⻚⾯的初始数据 |
onLoad | function | ⽣命周期回调—监听⻚⾯加载 |
onShow | function | ⽣命周期回调—监听⻚⾯显⽰ |
onReady | function | ⽣命周期回调—监听⻚⾯初次渲染完成 |
onHide | function | ⽣命周期回调—监听⻚⾯隐藏(页面发生跳转时) |
onUnload | function | ⽣命周期回调—监听⻚⾯卸载(跳转之后不能返回) |
onPullDownRefresh | function | 监听⽤⼾下拉动作 |
onReachBottom | function | ⻚⾯上拉触底事件的处理函数 |
onShareAppMessage | function | ⽤⼾点击右上⻆转发 |
onPageScroll | function | ⻚⾯滚动触发事件的处理函数 |
onResize | function | ⻚⾯尺⼨改变时触发,详⻅响应显⽰区域变化 |
onTabItemTap | function | 当前是 tab ⻚时,点击 tab 时触发 |
Page({
// 生命周期函数--监听页面加载
onLoad: function (options) {
// 发送异步请求来初始化页面数据
console.log(1)
},
// 生命周期函数--监听页面初次渲染完成
onReady: function () {
console.log(3)
},
// 生命周期函数--监听页面显示
onShow: function () {
console.log(2)
},
// 生命周期函数--监听页面隐藏
onHide: function () {
},
// 生命周期函数--监听页面卸载
onUnload: function () {
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
// 页面的数据或者效果重新刷新
},
// 页面上拉触底事件的处理函数
onReachBottom: function () {
// 上拉加载下一页数据
},
// 用户点击右上角分享
onShareAppMessage: function () {
},
// 页面滚动触发
onPageScroll: function() {
},
// 页面尺寸发生改变时触发
onResize() {
// 小程序发生了横屏竖屏触发
},
// 必须要求当前页面也是 tabbar 页面,并且点击的是当前页面
onTabItemTap() {
}
})
第三方框架
- 腾讯 wepy,类似 vue
- 美团 mpvue,类似 vue
- 京东 taro,类型 react
- 滴滴 chameleon
- uni-app,类似 vue]
- 原生框架 MINA
本地存储
// 存储数据
wx.setStorageSync("key", "value")
// 读取数据
wx.getStorageSync("key")