基礎(chǔ)的配置及視圖層、邏輯層自己看文檔  [微信小程序文檔][1]

這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié)

提醒

微信小程序不運(yùn)行在瀏覽器，所以不能操作Dom，也沒(méi)有document、window對(duì)象

每一個(gè)頁(yè)面路徑最多五層

eg：頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->（頁(yè)面F是跳轉(zhuǎn)不出來(lái)的）
注：不經(jīng)過(guò)redirect，redirect后的頁(yè)面算是第一層，但是沒(méi)有-返回-按鈕

沒(méi)有外鏈，只能用app.json里配置的路由，a標(biāo)簽編譯時(shí)會(huì)自動(dòng)過(guò)濾掉

wx:for循環(huán)渲染時(shí)，要添加wx:key，否則報(bào)警告

使用<scroll-view>做x軸滾動(dòng)時(shí)，要設(shè)置height屬性，否則開(kāi)發(fā)工具買賬，手機(jī)可不慣著你

給視圖綁定數(shù)據(jù)時(shí)，只有事件綁定、wx:key、wx:for-index、wx:for-item，直接綁定，不需要{{}}，其它綁定都要在{{}}里綁定

app.json里的pages，最好是按照，層級(jí)順序進(jìn)行配置，要不然可能不會(huì)跳轉(zhuǎn)

視圖元素單位

設(shè)計(jì)時(shí)最好讓ui做成750px，開(kāi)發(fā)中，ui是多少px，你寫成多少rpx就OK了，原理，自己查文檔去

頁(yè)面?zhèn)鲄?/h4>

<navigator url="/pages/detail/detail?id=2"></navigator>

Page({
    onLoad (opositions) {
        // 看看是不是你想要的
        console.log(opositions.id)
    }
})

視圖響應(yīng)

每個(gè)頁(yè)面都有一個(gè)Page實(shí)例，響應(yīng)就是該實(shí)例的setData方法觸發(fā)的，
*直接給綁定數(shù)據(jù)賦值，數(shù)據(jù)會(huì)改變，但是視圖不會(huì)渲染

js文件

    let config = {
        data: {}
    }
    Page(config)

事件綁定

wxml文件

    <view bindtap="tapHandler"></view>

js文件

    let config = {
        data: {},
        tapHandler () {
            console.log('i am a handler')
        }
    }

bindtap的綁定最終會(huì)解析成方法名，所以bindtap=“tapHandler(參數(shù))”，是會(huì)報(bào)錯(cuò)的，—-沒(méi)有找到‘tapHandler(參數(shù))’這個(gè)方法，
好在，執(zhí)行事件綁定函數(shù)時(shí)，會(huì)給它傳遞一個(gè)參數(shù)，參數(shù)里能取到，id、data-set，可以用他們倆綁定屬性，不要企圖找name、class等屬性，沒(méi)用的，沒(méi)有

公用組件

組件分三個(gè)文件，wxml、js、css

wxml文件定義template模版，頁(yè)面里以import方式引入，這樣能控制傳入模版的數(shù)據(jù)

js文件exports一個(gè)對(duì)象，頁(yè)面里以require方式引入，并且合并到Page實(shí)例化的配置對(duì)象中

    let tempateConfig = require('url')
    let config = {
        data: {}
    }
    config = Object.assign(config, templateConfig)
    Page(config)

css文件以@import方式導(dǎo)入

開(kāi)發(fā)技巧

1.錨點(diǎn)
<navigator>的url只能是app.json里配置的路由，只支持查詢字符串，不支持hash，所以不能通過(guò)鏈接做錨點(diǎn)了。
還好微信提供了<scroll-view>,實(shí)現(xiàn)如下：

wxml文件

    <view>
        <button data-hash="hash1" bindtap="goHash">點(diǎn)擊定向hash1</button>
        <button data-hash="hash2" bindtap="goHash">點(diǎn)擊定向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
            })
        }
    })

但是這是單向的，只能點(diǎn)擊按鈕，跳轉(zhuǎn)錨點(diǎn)，屏幕滑動(dòng)到相應(yīng)錨點(diǎn)，toView屬性不會(huì)相應(yīng)改變，當(dāng)然，如果你能通過(guò)bindscroll事件動(dòng)態(tài)取到的相關(guān)數(shù)據(jù)，并且最終能把toView計(jì)算出來(lái)，就另說(shuō)了，但不要想操作dom獲取元素寬高什么的，對(duì)不起，微信的dom賣完了，沒(méi)有

2.滾動(dòng)加載
微信沒(méi)有document、window對(duì)象，所以沒(méi)有onscroll給你用，那怎么辦呢？
還好微信提供了<scroll-view>,實(shí)現(xiàn)如下：

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才是你后端返回的真實(shí)數(shù)據(jù)
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的數(shù)據(jù)，setData重置movies
        }
    })

可以做懶加載，也可以做預(yù)加載，具體邏輯自己想吧

---

暫時(shí)就這些啦。。。最后抱怨一句，咋就不支持外鏈呢，引共用組件咋那么麻煩呢