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

這里只說一下自己的經驗總結

提醒

微信小(xiao)程序不運行在(zai)瀏(liu)覽器，所以不能操作Dom，也沒(mei)有document、window對象

每(mei)一個頁面路徑最(zui)多五(wu)層

eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的）
注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕

沒有外鏈(lian)，只(zhi)能用app.json里配置的路(lu)由(you)，a標簽編譯時會(hui)自動過濾(lv)掉(diao)

wx:for循(xun)環渲染時，要(yao)添加wx:key，否則(ze)報警告

使用<scroll-view>做x軸滾動時(shi)，要設(she)置(zhi)height屬(shu)性，否(fou)則開發工(gong)具買賬，手機可(ke)不慣著(zhu)你

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

app.json里的pages，最好是按照，層級順序進行配置，要(yao)不然(ran)可能不會跳轉(zhuan)

視圖元素單位

設計時最好讓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(參數)’這個方法，
好在，執行事件(jian)綁(bang)定(ding)函數(shu)時，會(hui)給(gei)它傳遞(di)一個參(can)(can)數(shu)，參(can)(can)數(shu)里能取到(dao)，id、data-set，可(ke)以(yi)用他們倆綁(bang)定(ding)屬性，不要企圖找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，所以不能通過鏈接做錨點了。
還好微(wei)信提供(gong)了<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
            })
        }
    })

但是這是單向的(de)(de)，只能點擊(ji)按鈕，跳轉錨(mao)點，屏(ping)幕滑動到(dao)相應(ying)(ying)錨(mao)點，toView屬(shu)性不會相應(ying)(ying)改變(bian)，當然(ran)，如果你能通(tong)過bindscroll事(shi)件動態(tai)取(qu)到(dao)的(de)(de)相關數(shu)據，并且最終能把toView計算(suan)出來，就另說了，但不要想操作dom獲取(qu)元素寬高什么的(de)(de)，對不起，微(wei)信的(de)(de)dom賣完了，沒有

2.滾動加載
微信沒有document、window對象，所以沒有onscroll給你用，那怎么辦呢？
還好微(wei)信提供了<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: '//......',
              data: {},
              success: function(res) {
                // res.data才是你后端返回的真實數據
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的數據，setData重置movies
        }
    })

可(ke)以做懶加載(zai)，也可(ke)以做預加載(zai)，具體邏輯(ji)自己想吧

---

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