1.獲取頁面可視區(qū)的高度

//getSystemInfoSync是獲取系統(tǒng)的信息的 wx.getSystemInfoSync().windowHeight;

2.獲取頁面的dom元素，原生js在小程序中是無法獲取到dom元素的，可以通過下面的方式獲取

//https://developers.weixin.qq.com/miniprogram/dev/api/SelectorQuery.exec.html wx.createSelectorQuery().selectAll('.tables-list').boundingClientRect((tablesList) => { //這里是獲取到的對象列表tablesList.forEach((item, index) => {height += item.height;}); }).exec((tablesList) => {//執(zhí)行所有的請求，請求結(jié)果返回的是dom列表 });

3.scroll-view簡單的使用，原理是：需要滾動的元素的高度必須超出父元素(scroll-view)的高度，真機調(diào)試才可以看到效果

<scroll-view scroll-y scroll-with-animation></scroll-view>

4.小程序的模板里不允許直接使用原生js的方法和return值，如果需要進行復(fù)雜的操作可以使用computed和filter進行數(shù)據(jù)計算或過濾

5.textarea原生組件如果它的外層元素是fixed的，即使使用fixed=”true”,文字會固定在當(dāng)前位置，目前解決方法是不給外層添加fixed

6.目前的語言包是通過模擬i81n實現(xiàn)語言包的，在子組件使用語言包需要通過props傳值，例如(:$t=”$t”)

7.關(guān)于小程序原生組件層級過高問題可以使用它的cover-view進行覆蓋

8.mpvue中無法使用axios，而我們的原本的h5項目需要在原來的基礎(chǔ)上改版為小程序，可以使用flyio

(1)import Fly from "flyio/dist/npm/wx"const axios = new Fly()export default axios; 另外可以參考一下文檔：https://www.poorren.com/mpvue-mini-program-ajax-axioshttps://www.jianshu.com/p/7a4b56e793e4

9.解決小程序內(nèi)容不夠的時候，高度100%無法撐滿容器，解決的辦法是
1.給page標(biāo)簽添加css
2.是給模板外層容器添加固定定位
3.使用小程序的wx.getSystemInfoSync().windowHeight;例如

(1) Page{Height:100%;Overflow-y:auto; } (2) .container{position: fixed;height: 100%;width: 100%;display:flex;flex-direction:column;align-items:center;justify-content: center; } (3)wx.getSystemInfoSync()可以獲取到系統(tǒng)的信息，wx.getSystemInfoSync().windowHeight可以獲取到移動端的可視區(qū)的高度，可以使用這個給最外層的元素綁定高度。

10.使用mpvue-router-patch代替vue-router實現(xiàn)this.$router.push方法，跳轉(zhuǎn)鏈接改為/pages/home/main

11.textarea穿透遮罩層的問題，因為原生組件層級最高，會導(dǎo)致textarea定位在遮罩上，解決的辦法是通過一個容器模擬textarea的樣式，在遮罩出現(xiàn)的時候textarea隱藏，模擬的容器顯示，遮罩隱藏的時候，textarea顯示，示例：

<textarea :class="is_weixin ? 'textarea-padding' : ''" v-show="!mastload" name="" :placeholder="請輸入留言" v-model="notice" cursor-spacing="90"> </textarea> <div :class="is_weixin ? 'textarea-div' : ''" v-show="mastload" class="textarea"> 請輸入留言 </div>

(1)is_weixin是用來判斷手機系統(tǒng)的，因為textarea在android和ios的樣式不同，在computed里計算，代碼如下：

is_weixin: function () {let res = wx.getSystemInfoSync();//獲取手機系統(tǒng)類型android或ioslet system = res.platform === 'android' ? true : false;return system; }

12.頁面層數(shù)的處理，我們知道小程序的頁面棧達到10層的時候，如果還是使用wx.navigateTo()是無法跳轉(zhuǎn)的，這個時候我們可以使用wx.reLaunch()、wx.redirectTo()、wx.navigateBack()解決這個問題，看代碼(mpvue里的解決方案，如果使用其它框架或原生api替換掉跟mpvue-router-patch相關(guān)的方法即可)

//跳轉(zhuǎn)的時候直接調(diào)用這個函數(shù)，這篇文章有詳細說明 https://segmentfault.com/a/1190000012282464 toPushPages: function (params) {//獲取頁面層數(shù)let currentsPages = getCurrentPages();let len = currentsPages.length;//可能每個人的傳進來的參數(shù)不同，有可能是字符串或?qū)ο髄et path = typeof params == 'object' ? params.path : params;//查找是否存在頁面層數(shù)中l(wèi)et index = currentsPages.findIndex(item => {//替換掉第一個/，有可能不同的傳進來的參數(shù)不同return path.replace(/^\//, '') == item.route;})//回退的頁面層數(shù)，默認是1let backFloor = len - (index + 1);//判斷頁面棧中是否已經(jīng)存在，存在則使用回退的方式if (index >= 0) {this.$router.go(backFloor);} else {//判斷頁面棧中的層數(shù)是否達到限制，就讓頂層的棧出棧，需要跳轉(zhuǎn)的頁面進棧if (len >= 10) {this.$router.replace(params);} else {this.$router.push(params);}}}

13.注意小程序中，編譯后的代碼包最大為2M，超過2M，需要對資源進行處理，例如圖片的優(yōu)化，或者做分包處理最大為8M

總結(jié)

以上是生活随笔為你收集整理的开发小程序问题总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。