小程序实战小汇总

前言

　　才发现已经长达两个月没有更新博客了，缘由固然也是有的了，就像我以前说的，博客之后可能主打的方向的平常开发中遇到的问题汇总和踩坑指南之类。对于技术学习和技术分享可能会比较偏向于在我的公众号和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单位，已经很好的完成了手机的适配

最后

　　主要就说下这几方面的问题的，若是还有大神在开发小程序上遇到问题而后也欢迎把遇到问题的解决方案留言喔~~~~