258资源分享网

  基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][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，最好是按照，层级顺序进行配置，要不然可能不会跳转

视图元素单位 设计时最好让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 config = { data: {} } config = Object.assign(config, templateConfig) Page(config) 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 } })

可以做懒加载，也可以做预加载，具体逻辑自己想吧

暂时就这些啦。。。最后抱怨一句，咋就不支持外链呢，引共用组件咋那么麻烦呢