小程序实战小汇总

前言

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

最后

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