前言

有一些知識點在另一篇文章了，畢竟小程序也是前端的一種嘛，盡量標題描述清晰一點，你們看目錄好找。

前端筆記 -- 不重復造輪子(遇到就更新內容）_坐等夕陽落time的博客-CSDN博客

1 跨頁面傳漢字，漢字亂碼

在接收漢字的頁面，使用 decodeURIComponent(傳過來的亂碼) ，漢字就恢復正常了

this.myname = decodeURIComponent(option.myname)

?解決報錯SyntaxError：Unexpected end of JSON input_辰九九的博客-CSDN博客

若對象的參數或數組的元素中遇到地址，地址中包括?、&這些特殊符號時，對象/數組先要通過JSON.stringify轉化為字符串再通過encodeURIComponent編碼，接收時，先通過decodeURIComponent解碼再通過JSON.parse轉換為JSON格式的對象/數組

wx.navigateTo({url: '/pages/user_info/user_info?title=邀請碼&params=' + encodeURIComponent(JSON.stringify(params)), }) onLoad: function (options) {if (options.title) {wx.setNavigationBarTitle({title: options.title,})this.setData({navigationBarTitle: options.title,params: JSON.parse(decodeURIComponent(options.params))})} },

2 當前頁面滾動到指定位置

目的：點擊搜索，直接滾動到商品列表處

1 首先模擬器是蘋果6

2 量各個模塊的高度，如下

?

?

即 要跳轉的高度（PX） =? 160 + 42 + 152 =? 354

然后如果模塊用了margin的，還要加上這個margin的高度，因為我margin用的rpx單位，所以這里我們口算，在蘋果6機型下的 1rpx = 2px

?

margin = 60rpx = 在蘋果6機型下是30px

?即 要跳轉的高度（PX） =? 160 + 42 + 152 =? 354 + 30 = 384px

3 然后接下來，我們在代碼里計算各個機型的rpx與px的換算比

原理：rpx（responsive pixel）是微信小程序解決自適應屏幕尺寸的尺寸單位，可以根據屏幕寬度進行自適應。微信小程序規定屏幕寬為750rpx。

所以 1rpx = 750rpx / 手機屏幕實際的高度（px)

let percentRatio = 750 / wx.getSystemInfoSync().windowWidth;

4 滾動到指定的高度

onSearch(e) {let toJumpRPX = 384 * 2 // 我們手動量的高度 * 蘋果6機型下的rpx與px換算比 = 要滾動的rpx數值let percentRatio = 750 / wx.getSystemInfoSync().windowWidth; // 各機型的rpx與px換算比let toJumpPX = toJumpRPX /percentRatio // 各機型中實際要跳轉的高度，px為單位// 微信小程序的滾動apiwx.pageScrollTo({scrollTop: toJumpPX})},

5 演示

6 其他參考

小程序技巧（跳轉到指定節點，錨點效果，非scroll-view實現）_許洪昌的博客-CSDN博客_小程序 錨點

微信小程序 - 實現頁面跳轉，跳轉到指定錨點位置 - sanyekui - 博客園

3?小程序 input 組件內容顯示不全（字顯示的長度不占滿 input 寬度）

在<input>標簽外面加了一層<view>,通過改變父層<view>來改變<input>標簽的寬度，input 自己給個width:100% ，即可

4 小程序給自定義組件傳布爾值

不能直接寫true、false, 它判斷是有值就是true，所以你發現傳false傳不過去，原因就是你直接寫false，要用兩個花括號包起來

?

5 小程序不想寫太多的 that = this

?然后就可以很爽的每個地方都用that了，不用一直寫 that = this 了

因為小程序頁面有生命周期，所以需要在onShow那里再賦值一次

6 小程序的雙向綁定，不用bindinput了

很簡單：value的前面加 model:?

加個空的bindinput方法是為小程序的調試器別顯示警告

<inputmodel:value="{{phone}}"placeholder="請輸入手機號碼"bindinput="handleInput" ></input>handleInput(e) {},

7 小程序打電話

let phone = e.currentTarget.dataset.phone if (phone) {wx.makePhoneCall({phoneNumber: phone,}) } else {wx.showModal({title: '提示',content: '商家未提供電話',showCancel: false,confirmText: '我知道了'}) }

8 小程序復制文字

let weixin= e.currentTarget.dataset.weixin if (weixin) {wx.setClipboardData({data: weixin,success: function (res) {wx.showModal({title: '提示',content: '復制成功，去添加商家為微信好友吧！',showCancel: false,confirmText: '我知道了'})}}) } else {wx.showModal({title: '提示',content: '商家未提供微信!',showCancel: false,confirmText: '我知道了'}) }

9 小程序加載圖片，點擊查看大圖，加載錯誤顯示占位圖

<image src="{{item.imagePath ? item.imagePath:'/images/ic-err-img.png'}}" mode="aspectFit" data-src="{{item.imagePath ? item.imagePath:'/images/ic-err-img.png'}}" catchtap="previewImage" binderror="onImageError" data-index="{{index}}" />// 預覽圖片(點擊查看大圖，不能看本地圖片大圖，圖片需要放在服務器 previewImage: function (e) {var current = e.target.dataset.src;console.log(current)let list = []list.push(current)wx.previewImage({current: current, // 當前顯示圖片的http鏈接 urls: list // 需要預覽的圖片http鏈接列表 }) },// 圖片加載失敗時 onImageError(e) {console.log(e)let index = ""if (e.target.dataset.index > -1) {index = e.target.dataset.indexthis.data.goodslist[index].imagePath = ""this.setData({goodslist: this.data.goodslist})} },

tips: image的樣式設置時，不管你給什么樣的mode，都必須在css里把它的寬高都寫上，這樣剛加載的時候，就不會產生很明顯的，圖片閃一下（變形）才正確顯示的效果。

10 微信小程序圖片加載慢的解決

前人的經驗，還是可以參考一下

實戰解決小程序圖片加載問題_夏爾の小酒館的博客-CSDN博客_小程序圖片加載慢怎么解決

微信小程序圖片處理方案，解決加載緩慢， - hhhhhhhhyyyyyyyy - 博客園

11 小程序在線聊天

此功能主要是為了沒時間開發聊天系統的準備的，如果自己開發的話用node.js來搭聊天系統后臺哈。

這里使用的是 騰訊的IM聊天，這個是要收費的，語音和視頻通話有問題，其他的聊天功能就正常。

即時通信 IM 步驟1：導入 TUIKit - 含 UI 快速集成方案（薦） - 文檔中心 - 騰訊云

12 生成海報

不使用組件：（我沒弄過，就看著下面的文檔感覺簡潔明了，雖然代碼殘缺了點，但是有經驗的自己參考一下，然后琢磨琢磨也是可以搞的）

生成分享海報（canvas2d） | 微信開放社區

?使用第三方組件：

之前有做過，通過json配置海報的，具體什么名字我忘記了。。。有空的時候再找一下之前的代碼

13 小程序頁面傳對象類型的參數

用 JSON.stringify(object) , 把? js的對象 轉成 JSON字符串

wx.navigateTo({url: '/pages/shop_goods_list/shop_goods_list?currentProduct=' + JSON.stringify(currentProduct),})

?然后用JSON.parse(objectjson) 把 JSON字符串 轉成 js的對象

onLoad: function (options) {let currentProduct = ""if (options.currentProduct) {currentProduct = JSON.parse(options.currentProduct)} }

14 小程序內凹圓弧背景

現在手機端ui界面是超級喜歡搞圓角的，而且正常的圓角不滿足了，喜歡搞內凹的圓角了，如圖

?實現方式：

1 讓ui給你切圖

2 用css實現

我們要先分析一下構成，就長得是不是一個矩形，然后加上圓形的部分邊，現在我們就是css來實現圓形的部分邊。

首先要會css畫半圓，下面這個博客css 畫圓形 教得挺好了，我就說思路

【CSS】CSS畫矩形、圓、半圓、弧形、半圓、小三角、疑問框_勵志故事的博客-CSDN博客_css 半圓

?首先我們要實現的是圓形的部分邊，我們可以畫出一個半徑很大的半圓，然后只取到這個半圓的中間部分，然后再讓這個半圓往上移動位置。重點就是調height的大小，和border-radius的大小，就可以實現控制這個圓弧的斜率，即凹的深度。

.v-swiper::after {content: '';width: 100%;height: 200rpx;position: absolute;z-index: -10;top: -70rpx;border-radius: 0 0 40% 40%;background: #FE3F68; }

總結就是 border-radius 屬性，只寫右邊兩個值，就是下面兩個角的弧度

.bg {background-color: #FE4858;height: 140rpx;width: 100%;border-radius: 0rpx 0rpx 50% 50%;text-align: center; }

不過一般來講，手機端的弧度都差不多是高度200rpx,邊框圓角40%或50%的，但是有的需要很高的高度，如圖（弧形還進行了優化，和上面截圖對比）

我們可以拆分成兩部分：

加入你需要的高度500rpx，那就300rpx直角邊框，200rpx弧角邊框，代碼如下

.top {width: 100%;color: #333333;background-color: #F9484B;text-align: center;height: 300rpx;}.arc-bg {background-color: #F9484B;height: 200rpx;width: 100%;border-radius: 0rpx 0rpx 50% 50%;transform: scale(1.1,1.1); // 放大以后弧形更自然 } <view class="top"> </view> <view class="arc-bg"> </view>

下面的輸入內容往上走

.content {position: relative; //和自己原先的位置相比top: -100rpx; // 往上移動了100rpxmargin-top: 10rpx;background: white;margin: 0rpx 32rpx;padding: 80rpx 70rpx;border-radius: 20rpx; }

15 小程序在onshow獲取頁面傳遞參數

用到這個是因為，發現uniapp的分享頁，進來的時候沒有先執行onload,而是onshow完再去onload，所以順序倒了，查詢就缺失參數了，所以就在onshow時獲取頁面的傳參（這個參就是onload那里的參數）

let pages= getCurrentPages();//獲取應用頁面棧 let options = pages[pages.length - 1].options//獲取頁面傳遞的信息 this.spuId = options.spuId || ''

16?列表根據對象指定的字段去重

（uniapp的寫法，但是去重方法原生微信小程序也能用，因為都是js)

js 里 對象可以根據字段名取值，這樣靈活性很高，函數傳參也可以不用傳索引號而是直接傳字段名，就可以直接修改對象的字段值了。

this.object['key'] = value

removeDuplication(items, validKey = validKey) {items.reverse() // 倒序，保留最新的數據const ids = []const list = []for (var i = 0; i < items.length; i++) {if (ids.indexOf(items[i][validKey]) === -1) {list.push(items[i])ids.push(items[i][validKey])}}list.reverse()return list}, // 去重 this.selectedPlatformAttrValueList = this.removeDuplication(this.selectedPlatformAttrValueList, 'attrId')

17?找出一個列表中含有其他列表值的元素

原理：JavaScript Array?indexOf()?方法，返回數組中某個指定的元素位置，如果在數組中沒找到指定元素則返回 -1。

let list1 = list.map(item => item.attrId) // 找處列表2中的含有列表1中的元素的元素 let list2 = this.selectedPlatformAttrValueList.filter(item1 => list1.indexOf(item1.attrId) > -1)

18?小程序、網頁 設置了全屏背景色，往下滑背景色就沒了，變成白色

小程序、網頁 設置了全屏背景色，往下滑背景色就沒了，變成白色_坐等夕陽落time的博客-CSDN博客

19 uniapp u-View?的輸入框，怎么做輸入限制，輸入兩位小數，然后設置輸入最小值和輸入最大值、整數、不給輸符號等

uniapp u-View 的輸入框，怎么做輸入限制，輸入兩位小數，然后設置輸入最小值和輸入最大值、整數、不給輸符號等_坐等夕陽落time的博客-CSDN博客

20 ?輸入的數值轉小數

// 數值精度 newVal = this.toPrecision(Number(value), 2)toPrecision(num, precision) {if (precision === undefined) precision = 2;return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(2); }

21 uniapp 值修改了，頁面卻沒有更新，使用異步更新

uniapp App端 解決input@input事件動態修改值不生效的問題_半吊子月淼的博客-CSDN博客

22 uniapp 原生組件事件保留自己的回調，又能夠支持自己傳其他參數

【uni-app】input組件 @input事件(實時監聽輸入)傳參問題_cdgogo的博客-CSDN博客_uniapp監聽鍵盤輸入

23 查看類型

Object.getPrototypeOf(dataForm.skuList[0].priceFee)

24 字符串轉列表，列表轉字符串

// 字符串轉列表 this.imgFileList = res.data.imgUrls.split(",") // 列表轉字符串 this.dataForm.imgUrls = this.imagePathList.join(",")

25 獲取當前頁面，判斷當前頁面是什么頁面

微信小程序，獲取當前頁面，判斷當前頁面是不是tabbar頁面_坐等夕陽落time的博客-CSDN博客原理：用getCurrentPages()方法，獲取用戶訪問的所有頁面，最后的那個頁面就是當前頁然后有route屬性，就知道當前頁面的路徑了，再和tabbar頁面的路徑對比就好了let pages = getCurrentPages()console.log(pages)if(pages.length > 0) {let prevPage = pages[pages.length - 1]if (prevPage.route === 'pages/index/index' .https://blog.csdn.net/weixin_43991241/article/details/124968266?spm=1001.2014.3001.5501

總結

以上是生活随笔為你收集整理的小程序实战工作的知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。