目錄

一 微信小程序的配套組成部分

1.1 域名

1.2 SSL域名證書 （https協(xié)議開頭）

1.3?服務(wù)器

1.4 短信資費(fèi)

1.5?申請(qǐng)小程序賬號(hào)

二 微信小程序開發(fā)

2.1 小程序與普通網(wǎng)頁(yè)開發(fā)的區(qū)別

2.2 開始咯

2.2.3 安裝微信開發(fā)者工具

2.2.4 創(chuàng)建小程序

三 微信小程序開發(fā)過(guò)程中遇到的問(wèn)題：

3.1 獲取圖形驗(yàn)證碼

3.2 背景圖片的設(shè)置

3.3 動(dòng)態(tài)標(biāo)題的設(shè)置

3.4? wx.navigateBack

3.5?微信小程序 swiper輪播圖高度寬度自適應(yīng)

3.6 微信小程序 swiper輪播圖，輪播圖圓角滑動(dòng)變會(huì)變成直角然后再回到圓角

3.7 微信小程序區(qū)分開發(fā)環(huán)境，測(cè)試環(huán)境（體驗(yàn)版本）及正式環(huán)境

通過(guò)　wx.getAccountInfoSync

3.8 微信小程序路由跳轉(zhuǎn)url傳參長(zhǎng)度過(guò)長(zhǎng)導(dǎo)致頁(yè)面接收參數(shù)報(bào)錯(cuò) eventChannel 方法解決

3.9 防止小程序多次點(diǎn)擊跳轉(zhuǎn)解決方案

3.10?navigationbartitletext如何設(shè)置讓標(biāo)題居中？

---

微信小程序開發(fā)

一 微信小程序的配套組成部分

1.1 域名

域名注冊(cè)，例如阿里云上

1.2 SSL域名證書 （https協(xié)議開頭）

SSL證書是由全球信任的證書頒發(fā)機(jī)構(gòu)(CA)驗(yàn)證服務(wù)器身份后頒發(fā)，可實(shí)現(xiàn)網(wǎng)站身份驗(yàn)證與數(shù)據(jù)加密傳輸雙重功能。用戶要想使用SSL證書，需要在證書服務(wù)商處申請(qǐng)購(gòu)買

微信小程序官方明確要求，必須要用https開頭

1.3?服務(wù)器

1.4 短信資費(fèi)

例如注冊(cè)登錄，此時(shí)需要為用戶提供短信發(fā)送

1.5?申請(qǐng)小程序賬號(hào)

小程序注冊(cè)：小程序

二 微信小程序開發(fā)

2.1 小程序與普通網(wǎng)頁(yè)開發(fā)的區(qū)別

小程序的主要開發(fā)語(yǔ)言是 JavaScript ，?網(wǎng)頁(yè)開發(fā)渲染線程和腳本線程是互斥的，這也是為什么長(zhǎng)時(shí)間的腳本運(yùn)行可能會(huì)導(dǎo)致頁(yè)面失去響應(yīng)，而在小程序中，二者是分開的，分別運(yùn)行在不同的線程中。網(wǎng)頁(yè)開發(fā)者可以使用到各種瀏覽器暴露出來(lái)的 DOM API，進(jìn)行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運(yùn)行在 JSCore 中，并沒(méi)有一個(gè)完整瀏覽器對(duì)象，因而缺少相關(guān)的DOM API和BOM API。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫(kù)，例如 jQuery、 Zepto 等，在小程序中是無(wú)法運(yùn)行的。同時(shí) JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無(wú)法運(yùn)行的。

2.2 開始咯

2.2.1 注冊(cè)小程序?

注冊(cè)鏈接

2.2.2 在菜單 “開發(fā)”-“開發(fā)設(shè)置” 看到小程序的?AppID?了?

2.2.3 安裝微信開發(fā)者工具

前往開發(fā)者工具下載界面下載開發(fā)者工具

2.2.4 創(chuàng)建小程序

打開微信開發(fā)者工具，選擇目錄輸入項(xiàng)目名稱及AppID，不使用云服務(wù)，新建小程序項(xiàng)目

后續(xù)

JSON的Key必須包裹在一個(gè)雙引號(hào)中

JSON的值只能是以下幾種數(shù)據(jù)格式，其他任何格式都會(huì)觸發(fā)報(bào)錯(cuò)，例如 JavaScript 中的 undefined。

數(shù)字，包含浮點(diǎn)數(shù)和整數(shù)

字符串，需要包裹在雙引號(hào)中

Bool值，true 或者 false

數(shù)組，需要包裹在方括號(hào)中 []

對(duì)象，需要包裹在大括號(hào)中 {}

Null

還需要注意的是 JSON 文件中無(wú)法使用注釋，試圖添加注釋將會(huì)引發(fā)報(bào)錯(cuò)。

三 微信小程序開發(fā)過(guò)程中遇到的問(wèn)題：

3.1 獲取圖形驗(yàn)證碼

<view class="weui-cell weui-cell_input"><input class="weui-input" placeholder="圖形驗(yàn)證碼" data-label="imgCode" bindinput="onInput" bindblur="onBlurInfo"/><image wx-if="{{imgCodeIcon}}" class="imgcode-btn" src='{{imgCodeIcon}}' bindtap="_nextPic"></image></view>

?<image wx-if="{{imgCodeIcon}}" class="imgcode-btn" src='{{imgCodeIcon}}' bindtap="_nextPic"></image>

imgCodeIcon為從后端獲取的base64的圖片鏈接

this.setData({imgCodeIcon: `data:image/png;base64,${res.data}`})

3.2 背景圖片的設(shè)置

wxss中?

background-image 只能接收鏈接形式或者是base64編碼的字符串

.backimg-wrap{height: 200rpx;background-image: url(https://minio.linkingjz.com/applets/image/product.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20210309%2F%2Fs3%2Faws4_request&X-Amz-Date=20210309T063038Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=60864d5872bb852089eac02b1551a9f6667d00035aa89e1b306ddbba3bbe785d) ;background-size: 100% 100%;background-repeat: no-repeat;background-position: center; }

3.3 動(dòng)態(tài)標(biāo)題的設(shè)置

3.4? wx.navigateBack

3.5?微信小程序 swiper輪播圖高度寬度自適應(yīng)

鏈接：微信小程序 swiper輪播圖高度寬度自適應(yīng)（解決輪播圖圖片顯示不全問(wèn)題）_一個(gè)手掰橙的博客-CSDN博客_swiper圖片顯示不全

swiper 寬度 / swiper 高度 = 原圖寬度 / 原圖高度
找出原圖片的寬度和高度，通過(guò)比例計(jì)算出swiper標(biāo)簽的高度，因此
swiper 高度 = swiper 寬度 * 原圖高度 / 原圖寬度

swiper{width: 100%;height: calc(100vw*原圖高度/原圖寬度);}

3.6 微信小程序 swiper輪播圖，輪播圖圓角滑動(dòng)變會(huì)變成直角然后再回到圓角

鏈接：swiper 輪播圖圓角滑動(dòng)變會(huì)變成直角然后再回到圓角 | 微信開放社區(qū)

3.7 微信小程序區(qū)分開發(fā)環(huán)境，測(cè)試環(huán)境（體驗(yàn)版本）及正式環(huán)境

鏈接：原生小程序根據(jù)當(dāng)前版本自動(dòng)切換 `開發(fā)版本、體驗(yàn)版本、正式版本` | 微信開放社區(qū)

通過(guò)　wx.getAccountInfoSync

let config; const COMMON = {USER_TOKEN: 'userToken', // 用戶tokenUSER_NICKNAME: 'nickname',// 用戶昵稱USER_ID: 'userId', // 用戶idORG_ID: 'orgId', // 企業(yè)idORG_NO: 'orgNo', // 當(dāng)前用戶機(jī)構(gòu)代碼USER_TYPE: 'userType', // 當(dāng)前用戶類型 }const TEST = {...COMMON,baseUrl: 'https://test-api.XXXX.com/',env: 'test' }const PRODUCT = {...COMMON,baseUrl: 'https://api.XXXX.com/',env: 'product' } // 獲取當(dāng)前賬號(hào)信息，線上小程序版本號(hào)僅支持在正式版小程序中獲取，開發(fā)版和體驗(yàn)版中無(wú)法獲取。 // envVersion:'develop','trial','release' const { miniProgram: { envVersion } } = wx.getAccountInfoSync(); if(envVersion === 'release'){config = PRODUCT }else{config = TEST }export default config

3.8 微信小程序路由跳轉(zhuǎn)url傳參長(zhǎng)度過(guò)長(zhǎng)導(dǎo)致頁(yè)面接收參數(shù)報(bào)錯(cuò) eventChannel 方法解決

微信小程序路由跳轉(zhuǎn)url傳參長(zhǎng)度過(guò)長(zhǎng)導(dǎo)致頁(yè)面接收參數(shù)報(bào)錯(cuò) eventChannel 方法解決_乘風(fēng)v的博客-CSDN博客_小程序url長(zhǎng)度限制

uni.navigateTo({ //跳轉(zhuǎn)頁(yè)面url: './afterSale?id=' + id + '&orderData=' + encodeURIComponent(JSON.stringify(item)) })/*** */ onLoad: function(options) { //接收頁(yè)面const order = JSON.parse(decodeURIComponent(options.order));console.log(order) }

3.9 防止小程序多次點(diǎn)擊跳轉(zhuǎn)解決方案

防止小程序多次點(diǎn)擊跳轉(zhuǎn)解決方案-實(shí)戰(zhàn)教程-小程序社區(qū)-微信小程序-微信小程序開發(fā)社區(qū)-小程序開發(fā)論壇-微信小程序聯(lián)盟

3.10?navigationbartitletext如何設(shè)置讓標(biāo)題居中？

標(biāo)題欄在安卓居左這個(gè)是在安卓上的UI風(fēng)格展示，如果你想居中的話，確實(shí)是只能自定義導(dǎo)航欄了

https://developers.weixin.qq.com/community/develop/doc/0008a290c6cbf055fbd613d8e5b800

總結(jié)

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

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