微信小程序开发-从起步到放弃

最近凑热闹试着开发微信的小程序, 从开始到入坑再到放弃, 写个博客以示纪念

官方文档在这里

---

1. 目录结构

├─pages
│  ├─index
│  │  ├─index.wxml
│  │  ├─index.wxss
│  │  └─index.js
│  └─logs
├─template
│  ├─template.wxml
│  ├─template.js
│  └─template.wxss
├─app.json
├─app.wxss
└─app.js

小程序的每一个界面的主要呈现是”page”, 相当于安卓中的”Activity”. 在小程序的根目录下的 app.xml app.wxss app.json 是整个小程序的公共文件.
其中:
app.json 是小程序配置文件 ( 相当于apk中的 AndroidManifest );
app.wxss 是全局样式表, app.js 是全局js.

2. 配置文件

全局配置文件 app.json 记录了整个小程序的配置, 小程序中每一个能够呈现的页面 (Page) 都需要在 app.json 中注册 , app.json 也可以配置小程序的窗口(Window 包括了小程序页面上面的导航栏)样式

app.json 文件的语法是 json 语法, 文件中中使用一个 key 为pages 的数组来记录页面, 使用 key 为window 的数组保存小程序的窗口配置

{
  "pages":[
    "pages/index/index",
    "pages/active/active",
    "pages/details/details",
    "pages/search/search",
    "pages/cashier/cashier",
    "pages/checkout/checkout",
    "pages/status/status"
  ],

  "window":{
    "navigationBarBackgroundColor": "#00aaff",
    "navigationBarTitleText" : "一个Demo",
    "navigationBarTextStyle":"#fff",
    "enablePullDownRefresh" : false
  }
}

3. 布局文件 wxml

wxml 是微信小程序的布局文件的后缀名, 其本质上是一个xml文件( 类似 apk 的布局文件 xml). 可以使用微信小程序提供的 组件库 来组建布局.

在微信小程序中, 页面布局中的数据是可以动态指定的. 为页面设置数据的方法是数据绑定, 而不是像web中那样使用DOM对象来动态设置. (*微信小程序中没有DOM对象.)

在wxml中可以使用 Mustache 语法（双大括号） 来实现绑定数据/动态渲染的功能. 查看微信小程序文档

<view>{{viewData}}view>


<view wx:if={{ifDisplay}}/>


<block wx:for={{list}} wx:for-item="item" wx:key="index">
       <view>{{item.data}}view>
block>


<template name="list-view">
    <scroll-view>
        <block wx:for={{list}}>
        <view>{{item}}view>
        block>
    scroll-view>
template>

 <template is="list-view" data="{{list}}"/> 

　　　注意, 在使用模板前需要在 wxml 文件里先使用 标签导入模板的wxml文件.
　　

view的界面: 可以使用WXSS来控制view的渲染. 注意渲染时的类选择器的类名不要和page中的类名冲突. 在需要渲染自定义的view的wxss中使用 @import "../customed-view.wxss"; 来导入自定义view的wxss文件.

　　

view的逻辑驱动: 使用js文件来实现逻辑驱动. 应该设置命名空间以防止js中变量名的冲突. 可以使用模块化的设计来实现自定view的逻辑驱动的封装.

7. 模块化

模块化在微信小程序的官方文档里有详细的介绍, 微信小程序的模块化和node中的模块化用法类似, node中每一个js文件都是一个模块, 使用 require ('path'); 获得模块的实例. require函数的返回值是一个js module的module.exports 对象的引用, 因此:

/*向module.exports中添加属性
** require返回: {name: 'chaol'}
*/
module.exports.name = 'chaol'; 

/*将module.exports指向一个对象
**require返回: {name: 'object'}
*/
module.exports = {name: 'object'};

8. 实现一个tab切换功能

这是我从书上看到的一个tab栏切换页面的实现方案, 将它的大致的思路记录下来.

1. 实现tab-view
   1.定义tab-view模板

<template name="tab-view" class="tab-container">
    <view class="tab-container" bindtop="onTabClicked">
        <block wx:for="{{pages}}" wx:key="index" wx:for-item="item">
            <text class="tab-button" data-index="{{index}}">{{item.name}}text>
        block>
    view>
template>

//wxss
.tab-container{
    width: 100%;
    display: flex;
}

• 在页面中引用tab-view

<import "../View/tab-view.wxml"/>
<template is="{{currentPage.page}}" data="{{pageData}}"/>
<template is="tab-view" data="{{pages}}"/>

//wxss文件
@import "../View/tab-view.wxss"

//js文件
var page1=require("../template/page1.js"),
    page1=require("../template/page2.js"),
    page3=require("../template/page3.js");
Page([
    data: {
        currentPage: {name: 页面1, page: "page1", obj: page1},
        pages :[{name: "页面1", page: "page1", obj: page1},
            {name: "页面2", page: "page2", obj: page2},
            {name: "页面3", page: "page3", obj: page3}]
    },
    //TODO
    onTabClicked: function(event){
        var index=event.currentTarget.dataset.index;
        this.setData({currentPage: this.data.pages[index]});
        //在这里还需要实现页面业务逻辑和页面数据的合并
        //TODO
    }
]);

1. 实现切换
   
   • 定义页面

<template name="page1">
    <view>{{page1Text}}view>
template>

• 业务逻辑和页面数据合并

//...此处衔接以上js
    onTabClicked: function(event){
        var index=event.currentTarget.dataset.index;
        this.setData({currentPage: this.data.pages[index].page});
        this.bindFunAndData(this, this.data.pages[index].obj);
    },

    bindFunAndData: function(currentPage, targetPage){
        var p;
        for ( p in targetPage ) {
          currentPage[p] = targetPage[p]
        }
    }

大致就到这里了. 包括网络请求和传感器在内的API都可以在微信小程序官方文档里查到.

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
3. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题.
4. 微信小程序的页面在渲染时需要转换成HTML并由系统的webview进行渲染, 所以应尽量减少页面的重绘, 页面需要更新时尽量使用```setData()``` 

---

我的水平有限, 如若读者发现文中错误还望不吝指出, 感激不尽!