微信小程序开发-我的总结

微信小程序开发总结

基础的配置及视图层、逻辑层本身看文档  [微信小程序文档][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
        }
    })

能够作懒加载，也能够作预加载，具体逻辑本身想吧

---

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