基础（一）

起步

申请账号

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

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

安装开发工具

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

代码构成

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .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 物理像素

建议：开发微信小程序时设计师可以用 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;
}

目前支持的选择器有：

生命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节

应用生命周期

指的是小程序入口文件，也就是 app.js

App({
  onLaunch() {
       // 在应用第一次启动的时候，获取用户的个人信息
  },
  onShow() {
       // 对应用的数据或者页面效果重置 
  },
  onHide() {
       // 暂停或者清除计时器 
  },
  onError(err) {
    // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送后台
       console.log(err) 
  },
  // 应用第一次启动的时候，如果找不到第一个入口页面，才会触发
  onPageNotFount() {
    // 如果页面不存在了，通过 js 的方式来重新跳转页面
  }
})

页面生命周期

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")