小程序模板網(wǎng)

微信小程序開發(fā)-個人經(jīng)驗總結

發(fā)布時間:2018-04-08 10:38 所屬欄目:小程序開發(fā)教程
本文作者:好JSER,來自原文地址

 

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

這里只說一下自己的經(jīng)驗總結

提醒

微信小程序不運行在瀏覽器,所以不能操作Dom,也沒有document、window對象

每一個頁面路徑最多五層

eg:頁面A->頁面B->頁面C->頁面D->頁面E->(頁面F是跳轉不出來的)
注:不經(jīng)過redirect,redirect后的頁面算是第一層,但是沒有-返回-按鈕

沒有外鏈,只能用app.json里配置的路由,a標簽編譯時會自動過濾掉

wx:for循環(huán)渲染時,要添加wx:key,否則報警告

使用<scroll-view>做x軸滾動時,要設置height屬性,否則開發(fā)工具買賬,手機可不慣著你

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

app.json里的pages,最好是按照,層級順序進行配置,要不然可能不會跳轉

視圖元素單位

設計時最好讓ui做成750px,開發(fā)中,ui是多少px,你寫成多少rpx就OK了,原理,自己查文檔去

頁面?zhèn)鲄?/h4>
<navigator url="/pages/detail/detail?id=2"></navigator>

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

視圖響應

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

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(參數(shù))”,是會報錯的,—-沒有找到‘tapHandler(參數(shù))’這個方法,
好在,執(zhí)行事件綁定函數(shù)時,會給它傳遞一個參數(shù),參數(shù)里能取到,id、data-set,可以用他們倆綁定屬性,不要企圖找name、class等屬性,沒用的,沒有

公用組件

組件分三個文件,wxml、js、css

wxml文件定義template模版,頁面里以import方式引入,這樣能控制傳入模版的數(shù)據(jù)
js文件exports一個對象,頁面里以require方式引入,并且合并到Page實例化的配置對象中

    let tempateConfig = require('url')
    let config = {
        data: {}
    }
    config = Object.assign(config, templateConfig)
    Page(config)
css文件以@import方式導入

開發(fā)技巧

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

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事件動態(tài)取到的相關數(shù)據(jù),并且最終能把toView計算出來,就另說了,但不要想操作dom獲取元素寬高什么的,對不起,微信的dom賣完了,沒有

2.滾動加載
微信沒有document、window對象,所以沒有onscroll給你用,那怎么辦呢?
還好微信提供了<scroll-view>,實現(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ù)據(jù)
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的數(shù)據(jù),setData重置movies
        }
    })

可以做懶加載,也可以做預加載,具體邏輯自己想吧


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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23123.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢