微信小程序小笔记

转载请注明出处：http://blog.csdn.net/anyfive/article/details/60757655

前言

前段时间研究了一下小程序，顺利把公司项目完整地搬到了小程序上面。在这里，分享一下心得。

其实小程序开发起来还算是比较简单，只要熟悉css和js，便基本不会有什么问题。

关于模块化

在我们开发app时，经常会把某个功能或者控件模块化，比如列表item、下拉刷新上拉加载、页面为空时的提示等等，在小程序中，也可以进行高度的模块化。

我们直接来看下例子吧，比如你现在要写一个用户的item：

1、在templates目录(其他目录也可以)创建item_user目录，在item_user目录中创建逻辑文件item_user.js、布局文件item_user.wxml、样式文件item_user.wxss；

2、在布局文件item_user.wxml中，暴露出模块的接口：

<template name="item_user">  <!--你的布局--></template>

3、在逻辑文件item_user.js，中，整合用户item的数据和事件，并将其绑定到对应的页面中：

function userItemClick(e) {    //用户item的点击事件}//用户item的数据var userItemDatas = {    datas: [],    total: 0}//用户item的事件集合var userItemEvent = {    userItemClick: userItemClick}//构造函数function UserItem(userDatas) {  //获得当前页面  var pages = getCurrentPages()  var curPage = pages[pages.length-1]  //填充数据  userItemDatas.datas = userDatas  //将数据设置到页面中  curPage.setData({      userDatas: userItemDatas  })  //将事件设置到页面中  Object.assign(curPage,userItemsEvent)}//暴露构造函数module.exports.UserItem = UserItem

Object.assign(curPage,userItemsEvent)这句代码，是把userItemEvent的成员变量(函数)，注入到curPage对象(其实是函数)中，在调试时，你会发现curPage中多了userItemClick函数

4、在对应页面中引用该模板：

userList.wxml:

<!--其他布局--><!--引入模板--><import src="../../templates/item_user/item_user.wxml"/><template is="item_user" data="{{...userDatas}}"/><!--其他布局-->

userList.wxss:

/*引入item_user的样式表*/@import "../../templates/item_user/item_user.wxss";/*其他样式*/

userList.js:

//导入item_user模板import { UserItem } from '../../templates/item_user/item_user.js'Page({    UserItem,    data: {        userDatas: []    },    onLoad: function (options) {        //初始化UserItem        new this.UserItem(userDatas)    }})

无非就是在样式表中引入item_user的样式表、在布局文件中引入布局模板、在逻辑文件中初始化

---

这里是将userDatas的成员变量传入模板，这样你在item_user.wxml中，便可以直接使用userDatas的成员变量，比如：

用户总数为：{{total}};

---

当然，你也可以将userDatas整个传入，这样：

在item_user.wxml中:

用户总数为：{{userDatas.total}};

---

类似于EventBus的全局事件类

为了保证各个页面的状态统一，我们通常会使用EventBus(android)、NSNotificationCenter(IOS)等来经常全部的事件监听和通知，我本打算自己写个工具，利用数组实现监听队列，后来发现已经有人实现了：WxNotificationCenter，原理比较简单，我们在这里就简单地说一下：

//把监听器selector，绑定到事件name上，放入事件监听数组__notices中，observer是当前页面curPage，用于解绑function addNotification(name, selector, observer) {    //省略源码}//为了防止重复添加监听，先遍历__notices，若已存在该监听器，便不再添加，否则添加function addOnceNotification(name, selector, observer) {    //省略源码}//通过name和observer(即页面)，从__notices中移除function removeNotification(name,observer) {    //省略源码}//遍历__notices，通知各监听器，其实就是调用每个selector函数function postNotificationName(name, info) {    //省略源码}

微信小程序最多打开5个页面的限制

小程序为了保证小而美，只允许页面栈中最多包含5个页面，也就是说，如果我们打开了5个页面，再想打开第6个，就不会有任何反应，对于这个问题，我选择的解决方法是：

1. 尽量集合简单或界面相识的页面，保证最多5个页面；
2. 对于路由问题，通过给每个页面设置TAG，每次打开页面时，判断该页面是否打开过，如打开过，直接回退到该页面，并刷新该页面数据(或直接重定向)；

其实这样效果并不是很好，比如用户页面路由是A-B-C-D，这时候打开B，就变成了A-B，按返回键，直接回到了A页面；最好的方式，还是为小程序专门更改设计，去除多余的不重要的页面，更改有可能产出长路由的地方

最后分享一个rpx和px互转的函数

虽然是很简单的函数，但当你需要设置ScrollView的高度、需要做动画时，你会发现它很实用

// rpx转pxfunction rpx2px(rpxValue, windowWidth) {    return (rpxValue * windowWidth) / 750}module.exports.rpx2px = rpx2px// px转rpxfunction px2rpx(pxValue, windowWidth) {    return (pxValue * 750) / windowWidth}module.exports.px2rpx = px2rpx

后记

经过两个月的时间，小程序也开始不断被大众和媒体淡忘。其实我感觉微信的小程序，的确是非常适合线下场景，比如点菜、查公交等等，但是对一个公司来说，没有红利，带不来流量，我为什么要开发这么个东西？而对于线下实体店来说，有多少是能投入成本去开发的？同时，目前小程序的流畅度和使用的舒适程度，和app相比还是有一段差距的。