初探微信小程序：大致流程，实现机制及开发前须知（23日更新） ...

一 、小程序是什么？

• 一种介于原生app、和web app的hybrid, 比web app 的开发成本还低;
• 通过微信进行加载;
• 相对原生app来说，更加轻量、更新实时、跨平台;
• 相对web app来说，资源离线，体验更流畅;
• 低频、无强粘性;
• 可以使用微信的支付功能

二、接入小程序的大致流程：

• 注册小程序：尚未对个人开放，需要对公打款或完成微信认证才有微信支付功能;
• 资料完善：包括小程序命名、描述、服务范围等;
• 功能开发;
• 提交审核：需要保证功能的完整性。

开发者工具 开发文档

三 、实现机制

基于微信提供的一套应用框架。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的Javascript Api，开发者能够非常方便的调用微信客户端提供的各种基础功能。

视图层描述语言 .WXML 和 .WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层之间通过 单向数据 绑定进行数据传输

四、开发前须知

• AppStore问题;
• 发布的项目包体积 < 1M, 只适合轻量级;
• 由于现在官方的限制，只能7天内能够给使用过该小程序的用户进行消息发送，所以关于消息发布还需要更多的斟酌;
• 开发基于微信框架，部分功能受限, 不能操作DOM, 没有script标签，要引入则需加入到项目;
• 没有与浏览器BOM相关的API;
• 没有cookie ;
• 用 storage 替代了H5中的localstorage、sessionstorage、 storage对每个小程序的大小是 10M，支持 同步 和 异步 。
• 同时只能存在 5 个url请求;
• 小程序页面只能同时打开 5 个，如果交互流程较长难以支持;
• 为了方便开发者减少配置项，规定描述页面的这四个文件必须具有相同的路径与文件名;
• 其他注意事项 设计文档 运营规范

注意：cookie问题，在请求发送时，可以动态设置Header发送报文的cookie，但是 cookie本身不能在客户端进行读写。

wx.request({
    header: {cookie: "abcd1234"},
    url: "/getinfo",
    data: {},
    ...
})

五、路由

1. pages 里面的第一个元素即为首页;
2. 每个页面需要手动在app.json中进行注册，否则不能访问;
3. 路由跳转： 组件跳转(navigator) ／ API跳转;
4. 只能同时打开5个页面，否则wx.navigateTo不能正常打开新页面，避免多层级的交互方式，或者使用wx.redirectTo。

// <navigator/>组件内部不能再嵌套<navigator/>组件。只能是单层存在

    <navigator url="search/search">
        <view class="serach_view_show" bindtap="bindtap"> 搜索</view>
    </navigator>

// API

    wx.navigateTo({  // 保留当前页
        url: "",
        ...
    }) 

    wx.redirectTo({  // 关闭当前页
        url: "",
        ...
    })

六、Tab页

1. 由app.json定义；
2. 最多 5 个；
3. 每个页面的 .json 文件可以覆盖定义导航栏。

七、页面结构

由同路径下同名的四个不同后缀文件的组成：

• .js 文件是脚本文件
• .json 文件是配置文件
• .wxss 是样式表文件
• .wxml 文件是页面结构文件

app.json 必须，微信框架配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

app.js 必须，可以什么都不需要写，后期再监听并处理小程序的生命周期函数、声明全局变量。

.wxml 文件

// wxml语法

<block wx:for="{{shareItems}}" wx:for-index="idx">
    <view id="{{idx}}" class="flex share-item box box-tb">
      <view class="flex box box-lr article-info">
        <view class="flex title">{{item.articleInfo.title}}</view>
      </view>
      <view class="user-info box box-lr">
        <image src="{{item.articleInfo.isApproved ? icon.approved : icon.approve}}" class="icon approve-icon"></image>
      </view>
    </view>
</block>

1. .wxml 文件通过相同的名称，将页面与逻辑js、样式、配置进行关联匹配
2. .wxml 组件语法
3. .wxml 提供两种文件引用方式import(有作用域)和include
4. 事件绑定方式

// test.wxml

<view class="flex title" bindtap="getInfo">{{userName}}</view>

// test.js

page({
    data: {},
    getInfo: function() {
        this.setData({
            userName: "Tom"
        })
    }
})

.wxss 文件

/** app.wxss **/

@import "common.wxss";

view {
  padding:15px;
}

1. 可通过 @import (后跟相对路径)样式表;
2. 尺寸单位：有两种单位：(1)、引入rpx(根据屏幕宽度进行自适应)的概念； (2)、rem；
3. 支持内联
4. 选择器：不再支持媒体查询，支持 .demo, #demo, view, view input, view::after, view::before;
5. 增加了app的flex布局;
6. weui 官方样式库 

规定屏幕宽为750rpx, 如iPhone6, 1rpx = 1物理像素 = 0.5px;

规定屏幕宽度为20rem, 1rem = (750/20)rpx;

.js 文件

1. 模块运行（类似node，框架自动添加外层define）;
2. 形式上支持CommonJs，通过require加载;
3. data应约定为只读，不能直接修改data值，否则 容易造成data中的数据与view不一致;

4. 更新View需使用setData()，与data中的数据进行Diff比较，不同才会更新。

• setData() 单次设置的数据 < 1M，要避免一次设置过多的数据;
• 支持ES6中的 … 操作符展开模块数据。

// js引入 

// a.js
function sayHi() {
    console.log("hello wxAPP!");
}
module.exports = {
    say: sayHi
}

// b.js
var say = require("a.js");

// data 操作 

page({
    data: {
        name: 'one'
    },
    handleData() {

        // 错误操作方式，虽不会报错，但不会更新view
        this.data.name = 'two';

        // 正确操作方式
        this.setData({
            name: 'tow'
        })

    }
})

.json 文件

• 各个页面的配置性文件

八、事件绑定

bind或catch开头，然后跟上事件的类型，如bindtap bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<view bindtap="clickMe">绑定事件</view>

八、杂项

微信支付

• 申请微信支付
• 设置密钥和下载证书
• 配置Https服务器
• 小程序与JSSDK微信支付比较

data操作

Page({
    data: {
        user: {
            name: {
                nickName: 'Tom'
            }
        }
    },
    changeData() {
        // data 设置，key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d
        this.setData({
            'user.name.nickName': '汤姆'
        })

        // 可以不预先在 this.data 中定义
        this.setData({
            'sex': 'male'
        })
    }
})

---------------------------------------------------------------------------------------------

// 标签自定义data取值

// index.wxml
    <view data-name="tear" data-type="someType" bindlongtap="getData">绑定事件</view>

// index.js
    Page({
        getData(e) {
            const _data = e.currentTarget.dataset;  // => {name: 'tear', type: 'someType'}
        }
    })

十、坑

• 编辑器问题；
• 调试工具和手机表现不一致问题(如 弹框标题);
• API在调试工具和真机上返回值不一样（如 wx.showModal()）;
• 模拟器对css的支持比较完整，真机只支持部分，但是文档没有
• .列出来;
• 如果api是post请求,参数是key-value形式,那么直接设置Object是不行的,必须手动拼;
• view标签不识别'/n'换行符,text组件可以;
• toast有success和loading状态,竟然没有失败状态，宽度是写死的,字一多就丑得要死;
• navigateTo无法封装到另一个js方法中,只能直接写,而且失败还不走失败的回调;
• 元素不能获取自定义da