这篇文章主要介绍了认识微信小程序以及小程序app的基本构建。

1.微信小程序账号与工具

1.1 小程序开发者账号注册

1.2微信开发者工具

1.3小程序在线Demo二维码

2.微信小程序文件结构与配置

fileTree.jpg

页面pages由四个文件组成：

文件类型 是否必须 作用
js 是 页面逻辑 ( 微信小程序没有window和document对象 )
wxml 是 页面结构 ( XML语法，不是HTML语法 )
wxss 否 页面样式表 ( 拓展了rpx尺寸单位，微信专属响应式像素 )
json 否 页面配置 ( 严格json格式，不能写注释，否则编译报错 )

2.1WXML 结构 (标签、组件)

组件文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

  • 常用布局标签

    1
    2
    3
    4
    5
    6
    <view></view>				相当于    <div></div>
    <text></text>				相当于    <span></span>
    <image></image>			     相当于    <img />
    //注意： image组件默认宽度300px、高度225px，一般需要手动设置图片宽高
    <navigator></navigator>		 相当于    <a></a>
    <block></block>				区块标签，不会渲染到页面

  • 轮播图组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长" circular="轮播图无缝连接">
    	<swiper-item>
          	<image src="图片路径1" width="375" height="150"/>
        </swiper-item>
    </swiper>
    <!-- demo -->
    <!-- 设置 autoplay="{{true}}" 和 autoplay 是等价的 -->
    <swiper indicator-dots autoplay duration='400' interval='2500' circular>
        <swiper-item wx:for="{{bannerList}}" wx:key="id">
            <image mode='aspectFill' src='{{item.url}}'></image>
        </swiper-item>
    </swiper>

2.2 WXSS 样式

WXSS文档： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

  • 与 CSS 相比，WXSS 扩展以下2个特性：
    • 尺寸单位 rpx ( responsive pixel 响应式像素) : 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。(开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准)
    • 样式导入 @import “样式表路径”;

2.3js逻辑

微信小程序没有BOM和DOM概念，所以不能使用window对象和document对象。

  • 微信小程序生命周期函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    Page({
      /** 页面的初始数据 */
      data: {},
      /** 生命周期函数--监听页面加载 */
      onLoad: function (options) {},
      /** 生命周期函数--监听页面初次渲染完成 */
      onReady: function () {},
      /** 生命周期函数--监听页面显示 */
      onShow: function () {},
      /** 生命周期函数--监听页面隐藏 */
      onHide: function () {},
      /** 生命周期函数--监听页面卸载 */
      onUnload: function () {}
    })

  • pages页面相关事件处理函数

    1
    2
    3
    4
    5
    6
    /** 页面相关事件处理函数--监听用户下拉动作 */
    onPullDownRefresh: function () {},
    /** 页面上拉触底事件的处理函数 */
    onReachBottom: function () {},
    /** 用户点击右上角分享 */
    onShareAppMessage: function () {}

2.4 JSON配置

配置文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

  • app.json 配置项列表

    | 属性 | 类型 | 必填 | 描述 |
    | ———————————————————— | ———— | —- | ———————– |
    | pages | String Array | 是 | 设置页面路径 |
    | window | Object | 否 | 设置默认页面的窗口表现 |
    | tabBar | Object | 否 | 设置底部 tab 的表现 |
    | networkTimeout | Object | 否 | 设置网络超时时间 |
    | debug | Boolean | 否 | 设置是否开启 debug 模式 |

    app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

2.5 window 配置

window配置：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window

  • 设置小程序的状态栏、导航条、标题、窗口背景色。

    | 属性 | 类型 | 默认值 | 描述 |
    | —————————- | ——– | ——- | ———————————————————— |
    | navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如”#000000” |
    | navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white |
    | navigationBarTitleText | String | | 导航栏标题文字内容 |
    | backgroundColor | HexColor | #ffffff | 窗口的背景色 |
    | backgroundTextStyle | String | dark | 下拉背景字体、loading 图的样式，仅支持 dark/light |
    | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面相关事件处理函数。 |
    | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |

    注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个关键词。

2.5 tabBar配置

tabBar配置：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

注意事项：
1.当设置 position 为 top 时，将不会显示 icon。
2.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
3.icon 大小限制为40kb，建议尺寸为 81px * 81px。

  • 属性说明：

    | 属性 | 类型 | 必填 | 默认值 | 描述 |
    | ————— | ——– | —- | —— | —————————————————- |
    | color | HexColor | 是 | | tab 上的文字默认颜色 |
    | selectedColor | HexColor | 是 | | tab 上的文字选中时的颜色 |
    | backgroundColor | HexColor | 是 | | tab 的背景色 |
    | borderStyle | String | 否 | black | tabbar上边框的颜色， 仅支持 black/white |
    | list | Array | 是 | | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
    | position | String | 否 | bottom | 可选值 bottom、top，设置成top是无图标 |

  • 其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

    | 属性 | 类型 | 必填 | 说明 |
    | —————- | —— | —- | ———————————————————— |
    | pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
    | text | String | 是 | tab 上按钮文字 |
    | iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px 81px，当 postion 为 top 时，此参数无效 |
    | selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px     81px ，当 postion 为 top 时，此参数无效 |

3.WXML高级（指令、事件）

  • 数据绑定

    1
    2
    3
    4
    5
    <view> {{message}} </view>

    <!-- 不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后表示true -->
    <checkbox checked="false"> </checkbox>	      <!-- 错误写法 -->				
    <checkbox checked="{{false}}"> </checkbox>    <!-- 正确写法 -->

  • 列表渲染wx:for

    1
    2
    <view wx:for="{{array}}" wx:key="id"> {{item}} </view>
    <view wx:for="{{array}}" wx:key="*this"> {{item}} </view>

    wx:key主要功能：提高列表渲染时排序的效率。（如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略）

    • 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
    • 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

  • 条件渲染wx:if wx:else wx:elif 

    1
    2
    3
    <view wx:if="{{item >= 80}}"> 优秀 </view>
    <view wx:elif="{{item >= 60}}"> 良好 </view>
    <view wx:else> 不及格 </view>

  • 事件

    • 事件对象可以获取额外信息，如 id, dataset(自定义属性集合), touches(触摸点坐标)。

    • 事件绑定和冒泡

      • 冒泡事件：bind事件类型如 bindtap bindlongpress
      • 非冒泡事件：catch事件类型如catchtap catchlongpress

    • 事件传参注意小程序绑定事件只能写函数名称，不能通过括号方式传参：

      1
      2
      3
      4
      <!--错误，事件不能触发-->
      <view bindtap="tapHandle(item.id)"> 点我触发事件 </view>
      <!--正确传参，能触发-->
      <view data-index="{{item.id}}" bindtap="tapHandle"> 点我触发事件 </view>
      1
      2
      3
      4
      5
      Page({
        tapHandle: function(event) { // 接收参数
           console.log( event.target.dataset.index );  // 输出标签自定义属性上的index值
        }
      })

4. WXS脚本

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，功能类似<script>标签，主要用于在视图层定义函数(比较少用)。

  • 注意事项：

    1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
    2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
    3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
    4. wxs 函数不能作为组件的事件回调。
    5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

  • demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!--wxml-->
    <view>{{ foo.sum(2,3) }}</view>
    <!-- wxs类似script，可在wxml中定义方法（不常用） -->
    <wxs module="foo">
        module.exports = {
            sum: function(a, b) {
                return a + b
            }
        }
    </wxs>

5.备注

5.1 小程序开发者工具常用快捷键

快捷键 说明
Shift + Alt + F 格式化代码
Ctrl + P 跳到文件
Ctrl + E 跳到最近文件
Ctrl + Shift + P 上传扫码预览
Ctrl + Shift + I 显示/隐藏调试器
Shift + Alt + 上/下箭头 直接复制被选中部分

5.2实现下拉刷新设置

  • 在.json文件中设置

    1
    2
    // 注意：如果刷新本页面就只在当前的json文件中添加，如果需要所有页面都实现下拉刷新就将下面的代码添加到app.json中
    "enablePullDownRefresh": true

  • 这是可以实现下拉刷新，但是看不见刷新时的loading效果，去掉app.json中window对象下的默认背景文字样式就行了

    1
    "backgroundTextStyle": "light",

    注意：下拉刷新需要在请求数据后清除刷新效果（手机端）

    1
    2
    3
    4
    5
    onPullDownRefresh: function() {
        // xxxx重置参数，重新加载
        // 下拉刷新手机上需要清除刷新效果
        wx.stopPullDownRefresh();
    }