起步

申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

登录 小程序后台 ,我们可以在菜单 “开发管理”-“开发设置” 看到小程序的 AppID 了 。
小程序的 AppID 相当于小程序平台的一个身份证

安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装

代码构成

结构 传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 JavaScript JavaScript
配置 JSON
  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

image.png

配置文件

全局配置

**
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

  1. {
  2. "pages":[
  3. // 排在首位的是小程序的首页
  4. "pages/index/index",
  5. "pages/logs/logs"
  6. ],
  7. "window":{
  8. "backgroundTextStyle":"light",
  9. "navigationBarBackgroundColor": "#fff",
  10. "navigationBarTitleText": "Weixin",
  11. "navigationBarTextStyle":"black"
  12. },
  13. "tabBar": {
  14. "list": [{
  15. "pagePath": "pages/index/index",
  16. "text": "首页"
  17. }, {
  18. "pagePath": "pages/logs/index",
  19. "text": "日志"
  20. }]
  21. }
  22. }
  • pages 字段 —— 页面路径列表
  • window 字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等
  • tabBar 字段 —— 底部 tab 栏的表现

其他配置项细节可以参考文档 小程序的配置 app.json

页面配置

每一个面下的 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.jsonwindow 中相同的配置项。

  1. {
  2. "navigationBarBackgroundColor": "#ffffff",
  3. "navigationBarTextStyle": "black",
  4. "navigationBarTitleText": "微信接口功能演示",
  5. "backgroundColor": "#eeeeee",
  6. "backgroundTextStyle": "light"
  7. }

完整配置项说明请参考小程序页面配置

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信搜索到。

完整配置项说明请参考小程序 sitemap 配置

WXML 语法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data

数据绑定使用 Mustache 语法(双大括号)将变量包起来

  1. <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:elifwx: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 作为视觉稿的标准

使用步骤:

  1. 确定设计稿宽度 pageWidth
  2. 计算比例 750rpx = pageWidth px ,因此 1px = 750rpx/pageWidth
  3. 在 less 文件中,只要把设计稿中的 px => 750/pageWidth rpx 即可
  4. 或者使用 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() {

  }
})

基础(一) - 图2

第三方框架

  • 腾讯 wepy,类似 vue
  • 美团 mpvue,类似 vue
  • 京东 taro,类型 react
  • 滴滴 chameleon
  • uni-app,类似 vue]
  • 原生框架 MINA

本地存储

// 存储数据
wx.setStorageSync("key", "value")
// 读取数据
wx.getStorageSync("key")