小程序是什么？一种介于原生ap
P、和web app的 hybrid, 比web app 的 开发成本还低;通过微信进行加载;相对原生app ..
分享者：treadpit 原文一 、小程序是什么？一种介于原生ap
P、和web app的 hybrid, 比web app 的 开发成本还低;通过微信进行加载;相对原生app来说，更加轻量、更新实时、跨平台;相对web app来说，资源离线，体验更流畅;低频、无强粘性;可以使用微信的 支付功能
二、接入小程序的 大致流程：注册小程序：尚未对个人开放，需要对公打款或完成微信认证才有微信支付功能;资料完善：包括小程序命名、描述、服务范围等;功能开发;提交审核：需要保证功能的 完整性。
开发者工具 开发文档
三 、实现机制
基于微信提供的 一套应用框架。微信通过封装微信客户端提供的 文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的 Javascript Api，开发者能够非常方便的 调用微信客户端提供的 各种基础功能。
视图层描述语言 .WXML 和 .WXSS，以及基于 JavaScript 的 逻辑层框架，并在视图层与逻辑层之间通过 单向数据 绑定进行数据传输
四、开发前须知AppStore问题;发布的 包体积 < 1M, 只适合轻量级;由于现在官方的 限制，只能7天内能够给使用过该小程序的 用户进行消息发送，所以关于消息发布还需要更多的 斟酌;开发基于微信框架，部分功能受限, 不能操作DOM, 没有script标签，要引入则需加入到;没有与浏览器BOM相关的 API;没有cookie ，用 storage 替代了H5中的 localstorag
E、sessionstorag
E、 storage对每个小程序的 大小是 10M，支持 同步 和 异步 。
宁波小程序开发对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。同时只能存在 5 个url请求;小程序页面只能同时打开 5 个，如果交互流程较长难以支持;为了方便开发者减少配置项，规定描述页面的 这四个文件必须具有相同的 路径与文件名;其他注意(attention)事项 设计文档 运营规范
注意：cookie问题，在请求发送时，可以动态设置Header发送报文的 cookie，但是 cookie本身不能在客户端进行读写。
wx.request({header: {cookie: "abcd1234"},url: "/getinfo",data: {},..})
五、路由pages 里面的 第一个元素即为首页;每个页面需要手动在app.json中进行注册，否则不能访问;路由跳转： 组件跳转(navigator) ／ API跳转;只能同时打开5个页面，否则wx.navigateTo不能正常打开新页面，避免多层级的 交互方式，或者使用wx.redirectTo。
// <navigator/>组件内部不能再嵌套<navigator/>组件。只能是单层存在<navigator url="search/search"><view bindtap="bindtap"> 搜索</view></navigator>// APIwx。navigateTo({ // 保留当前页url: "",..})wx.redirectTo({ // 关闭当前页url: "",..})
六、Tab页由app。json定义；最多 5 个；每个页面的 .json 文件可以覆盖定义导航栏。
七、页面结构
由同路径下同名的 四个不同后缀文件的 组成：.js 文件是脚件.json 文件是配置文件.wxss 是样式表文件.wxml 文件是页面结构文件
app.json 必须，微信框架配置文件入口，整个小程序的 全局配置。包括页面注册，网络设置，以及小程序的 window背景色，配置导航条样式，配置默认标题。
app.js 必须，可以什么都不需要写，后期再监听并处理(chǔ lǐ)小程序(procedure)的 生命周期函数、声明全局变量。
。wxml 文件
// wxml语法<block wx:for="{{shareItems}}" wx:for-index="idx"><view id="{{idx}}" ><view ><view >{{item.articleInfo.title}}</view></view><view ><image src="{{item.articleInfo.isApproved icon.approved : icon.approve}}" ></image></view></view></block>.wxml 文件通过相同的 名称，将页面与逻辑j
S、样式、配置进行关联匹配。wxml 组件语法.wxml 提供两种文件引用方式import(有作用域)和include事件绑定方式
// test.wxml<view bindtap="getInfo">{{userName}}</view>// test.jspage({data: {},getInfo: function() {this.setData({userName: "Tom"})}})
.wxss 文件
/** app.wxss **/@import "common.wxss";view {padding:15px;}可通过 @import (后跟相对路径)样式表;尺寸单位：有两种单位：
(1)、引入rpx(根据屏幕宽度进行自适应)的 概念；
(2)、rem；支持内联选择器：不再支持媒体查询，支持 .demo, #demo, view, view input, view::after, view::before;增加了app的 flex布局;weui 官方样式库
规定屏幕宽为750rpx, 如iPhone6, 1rpx = 1物理像素 = 0.5px;
规定屏幕宽度为20rem, 1rem = (750/20)rpx;
.js 文件模块运行（类似node，框架自动添加外层define）;形式上支持CommonJs，通过require加载;data应约定为只读，不能直接修改data值，否则 容易造成data中的 数据与view不一致;
更新View需使用setData()，与data中的 数据进行Diff比较，不同才会更新。
setData() 单次设置的 数据 < 1M，要避免一次设置过多的 数据;支持ES6中的 … 操作符展开模块数据。
// js引入// a.junction sayHi() {console.log("hello wxAPP!");}module.exports = {say: sayHi}// b.jsvar say = require("a.js");
// data 操作page({data: {name: 'one'},handleData() {// 错误操作方式，虽不会报错，但不会更新viewthis.data.name = 'two';// 正确操作方式this.setData({name: 'tow'})}})
.json 文件各个页面的 配置性文件
八、事件绑定事件类型描述touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗tap手指触摸后马上离开longtap手指触摸后，超过350ms再离开
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.dthis.setData({'user.name.nickName': '汤姆'})// 可以不预先在 this.data 中定义this.setData({'sex': 'male'})}})---------------------------------------------------------------------------------------------// 标签自定义data取值// index.wxml<view data-name="tear" data-type="someType" bindlongtap="getData">绑定事件</view>// index.jsPage({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方法中,只能直接写,而且失败还不走失败的 回调;元素不能获取自定义data的 完整对象值,只能传基本数据类型;开发工具更新后，原先height:auto失效,必须指定image的 高度为具体数值,不然高度为0。宁波小程序开发对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。text可以嵌套text，但不可以嵌套viewbutton的 边框是用:after方式实现的 ，用户如果在button上定义边框会出现两条线分隔线高度使用rpx问题
