微信小程序開發-個人總結

philadelphia 發布于2019-08-01 16:05 / 1172人閱讀

微信小程序開發總結

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

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

提醒

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

每一個頁面路徑最多五層

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

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

wx:for循環渲染時，要添加wx:key，否則報警告

使用做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了，原理，自己查文檔去

頁面傳參



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

視圖響應

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

js文件

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

事件綁定

wxml文件

    

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.錨點
的url只能是app.json里配置的路由，只支持查詢字符串，不支持hash，所以不能通過鏈接做錨點了。
還好微信提供了,實現如下：

wxml文件

    
        
        
    
    
        
        
    

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給你用，那怎么辦呢？
還好微信提供了,實現如下：

wxml文件

    
        
            {{item.name}}
        
    

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
        }
    })

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

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

云服務器 GPU云服務器小程序開發個人微信小程序開發個人的小程序開發微信小程序開發語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50288.html

微信小程序開發-個人總結

微信小程序開發總結基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結提醒微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的）注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...

FrancisSoung 2019-08-21 11:17 評論0 收藏0
微信小程序開發-個人總結

微信小程序開發總結基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結提醒微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的）注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...

derek_334892 2019-08-30 13:16 評論0 收藏0
Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0
微信小程序開發踩坑總結（持續完善中）

摘要：由于個人技術水平有限，在問題描述，解決方案中存在的問題，希望可以得到各位前輩的指點。本篇主要是記錄我在開發微信小程序中遇到的問題。各記錄點排序，跟隨自己開發過程中的問題出現時間而定。。微信小程序數據頁面數據傳遞總結由于個人技術水平有限，在問題描述，解決方案中存在的問題，希望可以得到各位前輩的指點。本篇主要是記錄我在開發微信小程序中遇到的問題。各記錄點排序，跟隨自己開發過程中的問題出現...

tianhang 2019-07-01 12:38 評論0 收藏0