小程序實戰小匯總


前言

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

  個人公眾號二維碼

  GitHub鏈接

https://github.com/PCAaron

正文

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

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

  接下來就是正式的正式的說下開發中踩的坑(其實也沒遇到什么特別的坑~~~),首先明確的說下開發之前瀏覽下小程序的開發文檔,這對於開發中開發哪些功能小程序能夠提供給我們有個認知,然后就是了解小程序Page的生命周期,這對於我們在打開小程序和關閉小程序時候需要執行某些操作是有很好的幫助的。之后就是開始細節開發中的需要注意的了。

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

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

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

  由於富文本編輯器返回的是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}}"/>

  三、對象修改的問題(這其實是無關小程序的了,關於對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對象轉成字符串剔除對象屬性后,再轉換成對象賦值。

  四、支付

  支付的話前端只需要調用小程序的wx.requestPayment接口即可,對於前端來說的話,請求的參數最好都是后端方法,尤其paySign字段,看過文檔是有關於商戶秘鑰的,所以最好是服務器經過md5加密返回。最后,對於支付后是否成功的話其實服務器還需要等待微信回調,所以最好是小程序提供的WebSocket接口,監聽服務返回成功后再執行其他操作。

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

  五、布局可以適當的使用下小程序提供的rpx單位,已經很好的完成了手機的適配

最后

  主要就說下這幾方面的問題的,如果還有大神在開發小程序上遇到問題然后也歡迎把遇到問題的解決方案留言喔~~~~

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM