小程序實戰小彙總

前言

　　才發現已經長達兩個月沒有更新博客了，緣由固然也是有的了，就像我以前說的，博客之後可能主打的方向的平常開發中遇到的問題彙總和踩坑指南之類。對於技術學習和技術分享可能會比較偏向於在我的公衆號和GitHub上更新。在此附上公衆號和GitHub連接，喜歡的能夠關注（雖然如今內容很少）。再說下最近忙的內容吧，最近就在忙公司項目，公司的小程序，上年就說要作的到今年年中終因而上線了第一個版本，而後小弟又做爲小程序的負責人吧進行項目的開發和技術分享，感受壓力山大。另一件事就是空閒時間幫朋友弄着一個商城項目，客戶端主要是用vue+vant實現的，而管理後臺是用vue+element-ui實習的，到時完成的話應該也會有篇關於vue開發的踩坑指南之類的吧。好吧，閒聊這麼多該入正題了~~~

　　我的公衆號二維碼

　　GitHub連接

https://github.com/PCAaron

正文

　　首先分享篇簡單的入門指南：https://github.com/FEAteam/Mini-Program

　　項目開始之初，領導就讓我寫篇簡單的小程序開發文檔，讓同事對小程序開發有了解，能進行開發。因而乎就有了上面的那篇入門指南。主要是拿了公司提供的接口作了個簡單的驗票的小工具供同事學習，而文檔的開發描述流程也是根據我從零到完成驗票工具的開發流程，因此比較具備實戰性。而因爲是關乎公司接口問題我就沒有把代碼分享出來，可是也分享了我以前一個我的小程序項目的代碼做爲開發借鑑。其實根據上面那份指南，而後對前端的html，css和js有了解應該是可以順利的完成小程序簡單功能的開發的了。

　　接下來就是正式的正式的說下開發中踩的坑（其實也沒遇到什麼特別的坑~~~），首先明確的說下開發以前瀏覽下小程序的開發文檔，這對於開發中開發哪些功能小程序可以提供給咱們有個認知，而後就是了解小程序Page的生命週期，這對於咱們在打開小程序和關閉小程序時候須要執行某些操做是有很好的幫助的。以後就是開始細節開發中的須要注意的了。

　　1、獲取輸入框和下拉框的值

　　經過bindinput和bindchange方法獲取event對象的屬性

　　2、獲取富文本編輯器內容

　　因爲富文本編輯器返回的是HTML內容，因此對於小程序來講是解析不了的（不用myvue等小程序框架），因此咱們經過wxParse組件完成對編輯器內容的解析。固然，小程序也給咱們提供了web-view組件來承載網頁內容，可是，web-view組件卻要網頁內容自動鋪滿整個小程序頁面而且不可編輯，因此須要知足富文本編輯器內容和小程序view內容混排的話就不知足條件了。

　　大概說下wxParse組件的用法

　　1.引入wxParse組件：https://github.com/icindy/wxParse/tree/master/wxParse

　　2.在須要引入的page模塊分別引入wxParse.js、wxParse.wxss

//在使用的View中引入WxParse模塊
const WxParse = require('../../wxParse/wxParse.js');

//在使用的Wxss中引入WxParse.css,能夠在app.wxss @import "../../wxParse/wxParse.wxss";

　　3.接口返回富文本內容後解析數據綁定

let article=''
/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數據名(必填) * 2.type能夠爲html或者md(必填) * 3.data爲傳入的具體數據(必填) * 4.target爲Page對象,通常爲this(必填) * 5.imagePadding爲當圖片自適應是左右的單一padding(默認爲0,可選) * 6.將接口返回的內容賦值給article便可 */ const that = this; WxParse.wxParse('article', 'html', article, that, 5);

　　4.最後wxml引入模板

// 引入模板 <import src="你的路徑/wxParse/wxParse.wxml"/> //這裏data中article爲bindName <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

　　3、對象修改的問題（這實際上是無關小程序的了，關於對js的瞭解）

　　主要操做是對對象A執行賦值獲得B，而後對B屬性進行修改最後也修改了A的屬性。其實通常想下好像沒啥毛病是吧。當時我就犯了這毛病因此單獨拿出來也說下。如描述不清楚直接看代碼：

let objA={name:'aaron',nick:'pc'} console.log(objA) let objB=objA console.log(objB) objB.name='fe_aaron' console.log(objA)

　　大家能夠看下objA打印出來啥

　　好吧，大概說下，實際上是因爲A賦值B其實只作到了將B的地址指向了A，其實並無進行深度賦值，因此改變B的屬性A的屬性也改變了。因此須要對對象執行賦值而後不相互影響的話就須要new新的對象執行賦值或者將B對象轉成字符串剔除對象屬性後,再轉換成對象賦值。

　　4、支付

　　支付的話前端只須要調用小程序的wx.requestPayment接口便可，對於前端來講的話，請求的參數最好都是後端方法，尤爲paySign字段，看過文檔是有關於商戶祕鑰的，因此最好是服務器通過md5加密返回。最後，對於支付後是否成功的話其實服務器還須要等待微信回調，因此最好是小程序提供的WebSocket接口，監聽服務返回成功後再執行其餘操做。

　　附小程序支付流程連接：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_10&index=1

　　5、佈局能夠適當的使用下小程序提供的rpx單位，已經很好的完成了手機的適配

最後

　　主要就說下這幾方面的問題的，若是還有大神在開發小程序上遇到問題而後也歡迎把遇到問題的解決方案留言喔~~~~