上周被 小顺序 刷了屏，吓得我周末赶忙撸了个 小顺序 版的 知乎日报 压压惊, 总结一下这个开辟体验，和踩过的坑。
先上图
开辟环境预备
小顺序 出来第二天就被破解，第三天微信就把开辟东西开辟下载了， 如今只须要下载 微信开辟者东西 便能够运用了，
建立项目的时刻，要挑选无 appid, 如许就不会有 appid 的考证了。
目次构造
app.js 注册app逻辑， app.wxss 全局款式文件 app.json 设置信息
pages 寄存页面文件
utils 东西类代码
images 图片资本文件
小顺序中每个页面都邑有三个文件 .wxml .wxss .js ，对应着构造、款式、和逻辑，相当于网页中的 html css 和 js 的关联。
开辟第一个页面
代码来自新建项目
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}//index.js
//猎取运用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事宜处置惩罚函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//挪用运用实例的要领猎取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})新建的项目中，index 下都邑看到这些代码，接下来离别引见 wxml wxss js
wxml
这个是页面构造的形貌文件, 重要用于以下内容
用标签情势指定组件运用
<view></view>运用
wx:forwx:if等指令完成一些模板上的逻辑处置惩罚运用
bind*绑定事宜
wxss
款式文件，和 css 语法基础一致，不过支撑的挑选器语法有限 看这里， 能够运用 flexbox 完成规划。
内部也能够运用 import 敕令引入外部款式文件
@import "common.wxss";
.pd {
padding-left: 5px;
}js
页面逻辑掌握， 遵照 commonJs 范例
// util.js
function formatTime(date) {
// ....
}
function formatDate(date, split) {
// ...
}
module.exports = {
formatTime: formatTime,
formatDate: formatDate
}var utils = require('../../utils/util.js')这里的js 并非在 浏览器环境下运转， 所以 window.* 这一类的代码都邑报错， dom 操纵也是不被许可的，官方现在好像是不能支撑其他的 js 库运转，全封闭式，这个今后应该会逐步完美。
页面上运用 Page 要领来注册一个页面
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面衬着完成
},
onShow:function(){
// 页面显现
},
onHide:function(){
// 页面隐蔽
},
onUnload:function(){
// 页面封闭
}
})当我们须要转变 绑定的数据时，必需挪用 setData 要领修正，才会触发页面更新，像如许：
Page({
data: {
text: '这是一个页面'
},
onLoad: function() {
this.setData({
text: 'this is page'
})
}
})前提衬着和列表衬着
以下内容来自微信官方文档。
小顺序运用 wx:if="{{condition}}" 完成前提衬着，类似于 vue 的 v-if
<view wx:if="{{condition}}"> True </view>也能够用 wx:elif 和 wx:else 来增加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>wx:for 掌握属性绑定一个数组，即可运用数组中各项的数据反复衬着该组件。
内置变量 index （数组遍历的下标）， item （数组遍历的每一项）
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>Page({
items: [{
message: 'foo',
},{
message: 'bar'
}]
})运用wx:for-item能够指定数组当前元素的变量名
运用wx:for-index能够指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>事宜绑定
wxml 只是用 bind[eventName]="handler" 语法绑定事宜
<view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>Page({
bindViewTap: function(e) {
console.log(e.taget)
}
})经由过程 data-* 和 e.target.dateset 通报参数
<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>Page({
bindViewTap: function(e) {
// 会自动转成驼峰式定名
console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
}
})现在踩过的坑
事宜绑定中 e.target.dataset
当在父组件绑定事宜和参数，点击时又子组件冒泡事宜到父组件，这个时刻 e.target.dataset 为空
<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">
<view><text>tap</text></view>
</view>Page({
bindViewTap: function(e) {
console.log(e.taget.dataset.testMsg) // undefined
}
})在线图片加载不稳定
在知乎日报这个项目上有大批图片须要从网上下载，这里 image 组件额显现显得极为不稳定，有许多的图片都显现不出来.
末了
微信小顺序如今还在内测阶段，有许多的题目须要完美，不过关于开辟速率和体验来讲照样不错的，期待正式宣布的那一天。
