Small micro-channel program development summary
基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1]
这里只说一下自己的经验总结remind
Small micro-channel program does not run in a browser, you can not operate Dom, there is no document, window objects
Each page path up to five
eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的）
注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮No outside the chain, can only be used in routing app.json configuration, automatically filters out a tag when compiled
wx: When rendering for loop to add wx: key, otherwise report warning
When using <scroll-view> to do x-axis scroll, to set the height property, or buy development tools, cell phones do not indulge you
When binding to view data, only event binding, wx: key, wx: for-index, wx: for-item, direct binding, does not need to {{}}, {{In every other binding in}} binding
app.json inside pages, preferably configured in accordance with, hierarchical order, or else may not Jump
When using touchstart, touchend, it is best not to stop bubbling, will affect the child's tap event, touchmove best to prevent bubbling, prevent the effects of the parent scroll-view
When using the input, the best dynamic set value in bindinput, otherwise the opportunity to really go wrong Andrews
View element unit
设计时最好让ui做成750px，开发中，ui是多少px，你写成多少rpx就OK了，原理，自己查文档去Page parameter passing
<navigator url="/pages/detail/detail?id=2"></navigator>
Page({
onLoad (opositions) {
// 看看是不是你想要的
console.log(opositions.id)
}
})View response
每个页面都有一个Page实例，响应就是该实例的setData方法触发的，
*直接给绑定数据赋值，数据会改变，但是视图不会渲染
js文件
let config = {
data: {}
}
Page(config)
Event binding
wxml文件
<view bindtap="tapHandler"></view>
js文件
let config = {
data: {},
tapHandler () {
console.log('i am a handler')
}
}
The final will be parsed into bindtap binding method name, so bindtap = "tapHandler (parameter)", is being given, the ---- did not find 'tapHandler (parameters)' this method,
when Fortunately, the event binding function , it will pass a parameter, the parameter can take years to, id, data-set, you can use them both binding properties, do not attempt to find the name, class and other attributes, useless, no
Common components
Component three documents, 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 simple object is defined by their combined function, supports multiple, multi-object consolidation
Object.assign () method runs on a given Andrews real machine, can not be used
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方式导入Development skills
1. anchor
<navigator> the only route app.json url in configuration only support the query string, do not support the hash, it can not be done by linking the anchor.
Some micro-channel provided <scroll-view>, implemented as follows:
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
})
}
})
But this is one way, only click a button, jump anchor, slide the screen to the corresponding anchor, toView properties are not changed accordingly, of course, if you can get to the bindscroll dynamic event-related data, and ultimately be able to toView calculated, on the other said, but do not want to get dom element wide operating what high, I'm sorry, micro-channel dom sold out, no
2. Scroll loaded
micro-letters no document, window object, so you do not onscroll to use, how to do it?
Some micro-channel provided <scroll-view>, implemented as follows:
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
}
})
Can do lazy loading, you can also do pre-loaded, specific logic they want it
These temporary friends. . . Finally complained one, ye do not support it outside the chain, lead sharing component ye so much trouble it