微信小递次开辟总结
基本的设置及视图层、逻辑层本身看文档 [微信小递次文档][1]
这里只说一下本身的经验总结提示
微信小递次不运转在浏览器，所以不能操纵Dom，也没有document、window对象
每一个页面途径最多五层
eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的）
注：不经由redirect，redirect后的页面算是第一层，然则没有-返回-按钮没有外链，只能用app.json里设置的路由，a标签编译时会自动过滤掉
wx:for轮回衬着时，要增加wx:key，不然报正告
运用<scroll-view>做x轴转动时，要设置height属性，不然开辟工具买账，手机可不惯着你
给视图绑定数据时，只要事宜绑定、wx:key、wx:for-index、wx:for-item，直接绑定，不需要{{}}，别的绑定都要在{{}}里绑定
app.json里的pages，最好是根据，层级递次举行设置，要不然能够不会跳转
运用touchstart、touchend时，最好不要阻挠冒泡，会影响子级的tap事宜，touchmove最好阻挠冒泡，防备影响父级scroll-view
运用input时，最幸亏bindinput中动态设置value，不然安卓真时机出问题
视图元素单元
设计时最好让ui做成750px，开辟中，ui是若干px，你写成若干rpx就OK了，道理，本身查文档去页面传参
<navigator url="/pages/detail/detail?id=2"></navigator>
Page({
onLoad (opositions) {
// 看看是否是你想要的
console.log(opositions.id)
}
})视图响应
每一个页面都有一个Page实例，响应就是该实例的setData要领触发的，
*直接给绑定数据赋值，数据会转变，然则视图不会衬着
js文件
let config = {
data: {}
}
Page(config)
事宜绑定
wxml文件
<view bindtap="tapHandler"></view>
js文件
let config = {
data: {},
tapHandler () {
console.log('i am a handler')
}
}
bindtap的绑定终究会剖析成要领名，所以bindtap=“tapHandler(参数)”，是会报错的，—-没有找到‘tapHandler(参数)’这个要领，
幸亏，实行事宜绑定函数时，会给它通报一个参数，参数里能取到，id、data-set，能够用他们俩绑定属性，不要希图找name、class等属性，没用的，没有
公用组件
组件分三个文件，wxml、js、css
wxml文件定义template模版，页面里以import体式格局引入，如许能掌握传入模版的数据js文件exports一个对象，页面里以require体式格局引入，而且兼并到Page实例化的设置对象中
let tempateConfig = require('url')
let mergeConfig = require('url/wxTools.js')['mergeConfig']
let config = {
data: {}
}
config = mergeConfig(config, templateConfig)
Page(config)
mergeConfig是本身定义的简朴的对象兼并函数，支撑多层，多对象兼并
Object.assign()要领在安卓真机上运转报错，不能用
wxTools.js
function merge (con, mcon) {
for (var key in mcon) {
if (typeof mcon[key] == 'object' && con[key]) {
merge(con[key], mcon[key])
} else {
con[key] = mcon[key]
}
}
return con
}
function mergeConfig () {
let config = {}
for (var i = 0, len = arguments.length; i < len; i++) {
config = merge(config, arguments[i])
}
return config
}
module.exports = {
mergeConfig: mergeConfig
}
css文件以@import体式格局导入开辟技能
1.锚点
<navigator>的url只能是app.json里设置的路由，只支撑查询字符串，不支撑hash，所以不能经由过程链接做锚点了。
还好微信供应了<scroll-view>,完成以下：
wxml文件
<view>
<button data-hash="hash1" bindtap="goHash">点击定向hash1</button>
<button data-hash="hash2" bindtap="goHash">点击定向hash2</button>
</view>
<scroll-view scroll-y="true" scroll-into-view="{{toView}}">
<view id="hash1"></view>
<view id="hash2"></view>
</scroll-view>
js文件
Page({
data: {
toView: 'hash1'
},
goHash (e) {
let hash = e.currentTarget.dataset.hash
this.setData({
toView: hash
})
}
})
然则这是单向的，只能点击按钮，跳转锚点，屏幕滑动到响应锚点，toView属性不会响应转变，固然，假如你能经由过程bindscroll事宜动态取到的相干数据，而且终究能把toView计算出来，就另说了，但不要想操纵dom猎取元素宽高什么的，对不起，微信的dom卖完了，没有
2.转动加载
微信没有document、window对象，所以没有onscroll给你用，那怎么办呢？
还好微信供应了<scroll-view>,完成以下：
wxml文件
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>
<view wx:for="{{movies}}" wx:key="index">
{{item.name}}
</view>
</scroll-view>
js文件
Page({
data: {
movies: []
},
getMovies () {
let _self = this
wx.request({
url: 'https://......',
data: {},
success: function(res) {
// res.data才是你后端返回的实在数据
_self.setData({
movies: res.data
})
}
})
},
loadMovies () {
// 获得要更新的数据，setData重置movies
}
})
能够做懒加载，也能够做预加载，详细逻辑本身想吧
临时就这些啦。。。末了埋怨一句，咋就不支撑外链呢，引共用组件咋那末贫苦呢
