近来，因为工作须要最先相识微信小顺序，虽然小顺序已出了很久了，刚出的那段时刻很火，看到许多关于小顺序的技术文章，不过如今好像没那末火了，anyway，我们照样能够进修下的。
一、相识微信小顺序
1.理念：小顺序开辟框架的目的是经由历程尽量简朴、高效的体式格局让开辟者能够在微信中开辟具有原生 APP 体验的效劳。
2.框架：框架的中心是一个响应的数据绑定体系。全部体系分为两块视图层（View）和逻辑层（App Service），框架能够让数据与视图异常简朴地坚持同步。当作数据修正的时刻，只须要在逻辑层修正数据，视图层就会做响应的更新。
3.相干材料：调试东西下载，浅易教程
开端相识这些基础信息后，我们先来看下TODOS这个运用做出来的终究结果
二、TODOS运用功用演示及目次构造
功用演示：
目次构造：
重要功用模块为：
index页面，新建使命，可完成增删等操纵
los页面，记录在index页面的操纵
下面我们细致引见下
三、代码详解
1.简朴设置app.json文件：
{
"pages":[
"pages/index/index", // 设置页面途径，项目翻开后找到这个途径下的文件
"pages/logs/logs"
],
"window":{ // 设置默认页面的窗口表现
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "TODOS",
"navigationBarTextStyle":"black"
},
"tabBar": { // 设置底部tab的表现
"borderStyle": "white",
"backgroundColor": "#f5f5f5",
"selectedColor": "#222",
"list": [ // 对应底部下面两个菜单项；TODOS和LOGS
{
"pagePath": "pages/index/index",
"text": "TODOS",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-actived.png"
},
{
"pagePath": "pages/logs/logs",
"text": "LOGS",
"iconPath": "images/note.png",
"selectedIconPath": "images/note-actived.png"
}
]
}
}2.app.js和app.wxss文件
App() 函数用来注册一个小顺序。吸收一个 object 参数，其指定小顺序的性命周期函数等。App() 必须在 app.js 中注册，且不能注册多个。
示例代码
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})在这个项目中不须要加什么代码在App({})中，所以文件中只要一个App({})
app.wxss文件重要能够设置一些全局款式
page {
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}3.注册页面Page
Page() 函数用来注册一个页面。吸收一个 object 参数，其指定页面的初始数据、性命周期函数、事宜处置惩罚函数等。
一.初始化数据
// ===== 页面数据对象 =====
data: {
input: '',
todos: [],
leftCount: 0,
allCompleted: false,
logs: [],
addOneLoading: false,
loadingHidden: true,
loadingText: '',
toastHidden: true,
toastText: '',
clearAllLoading: false
},初始化数据作为页面的第一次衬着。data将会以JSON的情势由逻辑层传至衬着层，其数据能够是：字符串，数字，布尔值，对象，数组。
衬着层能够经由历程WXML对数据举行绑定。
<input class="new-todo" value="{{ input }}" placeholder="Anything here..." auto-focus bindinput="inputChangeHandle" bindchange="addTodoHandle"/>如上述代码中的input.
二.性命周期函数
// ===== 页面性命周期要领 =====
onLoad: function () {
// 从缓存猎取使命列表数据，并用setData设置
var todos = wx.getStorageSync('todo_list') // 挪用 WX API 从当地缓存中猎取数据
if (todos) {
var leftCount = todos.filter(function (item) {
return !item.completed
}).length
this.setData({ todos: todos, leftCount: leftCount })
}
// 设置logs数据
var logs = wx.getStorageSync('todo_logs')
if (logs) {
this.setData({ logs: logs })
}
},
onLoad: 页面加载
一个页面只会挪用一次。吸收页面参数能够猎取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。setData: 吸收一个对象，以 key，value 的情势示意将 this.data 中的 key 对应的值改变成 value。
三.事宜处置惩罚函数
新增使命处置惩罚函数：
addTodoHandle: function (e) {
if (!this.data.input || !this.data.input.trim()) return
this.setData( {
addOneLoading: true
});
//open loading
this.setData( {
loadingHidden: false,
loadingText: 'Waiting...'
});
var todos = this.data.todos
todos.push({ name: this.data.input, completed: false })
var logs = this.data.logs
logs.push({ timestamp: new Date().toLocaleString(), action: '新增', name: this.data.input })
this.setData({
input: '',
todos: todos,
leftCount: this.data.leftCount + 1,
logs: logs
})
this.save()
},
save: function () {
wx.setStorageSync('todo_list', this.data.todos)
wx.setStorageSync('todo_logs', this.data.logs)
//close loading and toggle button loading status
var self = this;
setTimeout( function() {
self.setData( {
loadingHidden: true,
addOneLoading: false,
loadingText: ''
});
}, 100);
},重要把时刻new Date().toLocaleString(), action:’新增’,事宜名 name: this.data.input这三个字段push到todos这个data数据中；然后在save()中经由历程wx.setStorageSync(‘todo_list’, this.data.todos)设置缓存。
使命项点击状况切换函数:
toggleTodoHandle: function (e) {
var index = e.currentTarget.dataset.index
var todos = this.data.todos
todos[index].completed = !todos[index].completed
var logs = this.data.logs
logs.push({
timestamp: new Date().toLocaleString(),
action: todos[index].completed ? '标记完成' : '标记未完成',
name: todos[index].name
})
this.setData({
todos: todos,
leftCount: this.data.leftCount + (todos[index].completed ? -1 : 1),
logs: logs
})
this.save()
},var index = e.currentTarget.dataset.index 猎取当前索引，对应的wxml代码为:
<view class="item{{ item.completed ? ' completed' : '' }}" wx:for="{{ todos }}" wx:key="{{ index }}" bindtap="toggleTodoHandle" data-index="{{ index }}">
<!-- completed: success, todo: circle -->
<icon class="checkbox" type="{{ item.completed ? 'success' : 'circle' }}"/>
<text class="name">{{ item.name }}</text>
<icon class="remove" type="clear" size="16" catchtap="removeTodoHandle" data-index="{{ index }}"/>
</view>bindtap: 当用户点击该组件的时刻会在该页面对应的Page中找到响应的事宜处置惩罚函数
末了斟酌到了loading的结果，要应用button组件的loading属性来完成。然则loading仅仅是一个款式的掌握，它不会掌握这个按钮是否能反复点击。所以还要应用button的disabled属性，防备反复点击。
<button type="primary" size="mini" bindtap="addTodoHandle" loading="{{addOneLoading}}" disabled="{{addOneLoading}}">
+ Add
</button>
js：
loadingChange: function() {
this.setData({
loadingHidden: true,
loadingText: ''
});
},
toastChange: function() {
this.setData( {
toastHidden: true,
toastText: ''
});
}
LOGS页面比较简朴，重要经由历程var logs = wx.getStorageSync(‘todo_logs’)
猎取logs列表，然后在页面衬着，这里就不贴代码了。
至此，基础相识了TODOS运用的构建历程，经由历程代码详解、参考微信小顺序官方文档相识了微信自家开辟的视图层形貌言语WXML和WXSS，以及基于 JavaScript 的逻辑层框架；与HTML页面构造类似，对应HTML，CSS，JAVASCRIPT；所以进修起来比较轻易。不过仅仅经由历程这个TODOS运用，还只是相识小顺序这个平台的一些基础用法。庞杂一点，页面跳转，收集要求等都须要我们去实践，才能对小顺序相识得更多。
完全代码：
源代码
参考材料：
1.https://github.com/zce/weapp-…
2.http://www.cnblogs.com/lyzg/p…
