微信小程序开发(一)新建小程序项目

---

前提

在准备微信小程序开发之前，希望你已经在微信·公众平台 https://mp.weixin.qq.com/注册了小程序。微信小程序账号注册入口 https://mp.weixin.qq.com/wxopen/waregister?action=step1。

获取小程序AppID

1.微信·公众平台 https://mp.weixin.qq.com/登录你的小程序账号； 2.设置–>开发设置–>开发者ID

获取小程序AppSecret

1.微信·公众平台 https://mp.weixin.qq.com/登录你的小程序账号； 2.设置–>开发设置–>开发者ID

配置服务器域名

1.微信·公众平台 https://mp.weixin.qq.com/登录你的小程序账号； 2.设置–>开发设置–>开发者ID 不配置这个，小程序就不能使用网络上的数据。 配置前 配置后(这个根据需求配置，我的只使用了request)

新建小程序

1.下载微信小程序开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，这个安装即可。 2.新建项目

3.小程序默认页面

4.目录说明 - pages: 小程序页面文件夹(以后的页面可以都放在这个目录下面) - logs: 默认的调试文件 - utils: 工具文件夹 - app.js: 启动js文件 - app.json 小程序全局配置文件 - app.wxss 小程序全局css样式 官方说明-简易教程 https://mp.weixin.qq.com/debug/wxadoc/dev/这里有详细的说明。 5.快速新建页面 这里我只说说怎么快速新建页面。 我们打开app.json文件，在pages字段下面，比如我们新建 一个home的页面： 在输入"pages/home/index"后保存就会自动生成对应的目录。

项目预览

看下图页面，点击预览后会生成一个二维码，我们使用手机微信扫码即可在手机端预览(项目没有配置AppID的是不可以预览)。

在这个项目做好的时候，并没有那么急着提交发布，而是先看了小程序的文档小程序-运营 https://mp.weixin.qq.com/debug/wxadoc/product/index.html?t=2017527，这一快的文档还是很有必要仔细读一读的。在第一次提交的时候，我就知道会被拒绝，为什么？因为我这个需要提供测试账号，但是在初次提交的时候没有地方让你提供测试账号；被拒绝后，我提供了测试账号和演示视频就上线了。最后还是要好好看看了小程序的文档小程序-运营 https://mp.weixin.qq.com/debug/wxadoc/product/index.html?t=2017527。

微信小程序开发(二)图片上传

---

准备工作

配置uploadFile合法域名

在做微信小程序的图片上传之前我们需要先配置uploadFile的合法域名。这个可以看《微信小程序开发(一)新建小程序项目》的服务器配置部分。

看小程序文档

看小程序文档—wx.uploadFile https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html，看文档主要是看小程序给的api是怎么使用的。在使用wx.uploadFile之前需要先使用wx.chooseImage(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject这个api，因为我们需要先选择图片。

代码实现

有了上面的准备工作后我们就可以实际操作了。

小程序端的实现

小程序端的实现其实很简单，一个事件去出发选择上传操作。

这里我也开放我的两个图片上传的接口:

这两个接口的使用大家可以看上线的文章，遇见接口不能使用时可以联系我，我开服务器。

服务端的实现

在实现服务端，我们需要使用一个新的模块multer,关于这个模块的使用，大家可以看文档就是了。 代码：

后端代码其实也很简单的。理清思路就好做了。

效果图

手机不能搞gif图，就电脑截屏了，这个在微信预览是一样的。

微信小程序开发(三)textarea的bug

---

最近在开发一个商城项目，其中有一块是评价，就像淘宝手机端的评价那样。首先看看我的页面结构。

就是一个页面可以多多个商品进行评价，每个写具体评价的位置是一个textarea。使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。

就是textarea不能跟随一起滚动。 微信小程序给了一些Bug和建议：

我这个界面底层并没有使用scroll-view,但是还是有问题。感觉微信给的第5点覆盖面不广，应该是对于滚动的页面都不行。在HTML里面滚动的页面底部并不一定是scrollview,只要页面高度大于屏幕高度 就都可以滚动。 最终的解决办法是，把本来订单后评价按钮修改成对订单中的每个商品后面单独加一个评价按钮去评价。

微信小程序开发(四)获取用户openid

---

在小程序里面有两个地方获取用户的openid。 一个是wx.login(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html

,第二个是wx.getUserInfo(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html#wxgetuserinfoobject。 这里我使用的是第一种wx.login(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html。

步骤

后端的实现

后端的实现就是后端调用这个接口：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code。

具体实例

微信小程序开发(五)小程序支付-统一下单

---

在做小程序支付希望你已经熟读微信的文档微信支付-小程序-手机端https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject和微信支付-小程序-后台https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3。且你已经有了

关于上面的这4个数据的获取，请自行在自己的账号中获取和设置。且你已经有了用户的openid。《微信小程序开发(四)获取用户openid》。

小程序接口

小程序接口就暴露这一个方法。这个方法有4个参数是需要后台去获取的。

其实大部分工作都是后台的事情。

后端实现

后端主要是统一下单https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1的这个接口https://api.mch.weixin.qq.com/pay/unifiedorder。 这里主要就是几个签名算法https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3：

统一下单签名

小程序paySign

统一下单后端实现

wxConfig代码：

实例

微信小程序开发(六)小程序支付-notify_url

---

在《微信小程序开发(五)小程序支付》里的微信支付里有一个notify_url(https://www.hgdqdev.cn/api/wxpay)。notify_url是位置支付成功后的一个通知地址：接收微信支付异步通知回调地址，通知url必须为直接可访问的url，不能携带参数。 这里存在一个问题就是怎么获取微信通知过来的数据。支付结果通知文档https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7。

具体实现 我的后台是node.js + express4; 1.添加依赖body-parser-xml,这个的使用看文档即可。 2.修改app.js

3.接口实现

4.返回结果

微信小程序开发(七)小程序支付-查询订单

---

应用场景

该接口提供所有微信支付订单的查询，商户可以通过查询订单接口主动查询订单状态，完成下一步的业务逻辑。

需要调用查询接口的情况： ◆ 当商户后台、网络、服务器等出现异常，商户系统最终未接收到支付通知； ◆ 调用支付接口后，返回系统错误或未知交易状态情况； ◆ 调用被扫支付API，返回USERPAYING的状态； ◆ 调用关单或撤销接口API之前，需确认支付状态；

接口说明

这里如果已经做好了统一下单，《微信小程序开发(五)小程序支付-统一下单》。再做查询订单就是一件很简单的事情了。 但是这里需要注意的是商户订单号-out_trade_no这个，因为我们在统一下单的时候有这个，查村订单也是根据这个区查询，后面的关闭订单，退款都可以根据这个去操作。

代码实现

总结

其实代码实现很简单就是看微信的文档就可以。

微信小程序开发(八)小程序支付-关闭订单

---

应用场景

以下情况需要调用关单接口：商户订单支付失败需要生成新单号重新发起支付，要对原订单号调用关单，避免重复支付；系统下单后，用户支付超时，系统退出不再受理，避免用户继续，请调用关单接口。 注意：订单生成后不能马上调用关单接口，最短调用时间间隔为5分钟。

接口说明

这一依然要注意的是商户订单号-out_trade_no 这个，因为我们退款是根据这去微信那边退款的。

代码实现

微信小程序开发(九)小程序支付-申请退款

---

应用场景

当交易发生之后一段时间内，由于买家或者卖家的原因需要退款时，卖家可以通过退款接口将支付款退还给买家，微信支付将在收到退款请求并且验证成功之后，按照退款规则将支付款按原路退到买家帐号上。 注意： 1、交易时间超过一年的订单无法提交退款； 2、微信支付退款支持单笔交易分多次退款，多次退款需要提交原支付订单的商户订单号和设置不同的退款单号。一笔退款失败后重新提交，要采用原来的退款单号。总退款金额不能超过用户实际支付金额。

接口说明

这里退款还是根据商户订单号-out_trade_no去微信那边做申请退款。

代码实现

这个是需要证书了，

证书的使用 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3。 我的后端使用的node.js，后端网路请求使用的是request,这里需要看看这部分Using options.agentOptions https://www.npmjs.com/package/request#using-optionsagentoptions。

微信小程序开发(十)小程序支付-查询退款

---

应用场景

提交退款申请后，通过调用该接口查询退款状态。退款有一定延时，用零钱支付的退款20分钟内到账，银行卡支付的退款3个工作日后重新查询退款状态。

接口说明

这里退款还是根据商户订单号-out_trade_no去微信那边查询

代码实现

微信小程序开发(十一)五星好评

---

准备工作

首选需要有两个星星，一个满分星星，一个空心的星星。

代码实现

.wxml文件

这是先一个for循环构建出5个星星

.wxss文件

这里大家可能会注意到显示星星的<image>控件比他外面的<view class="star">要小。其实这里是为了加强用户体验。很多时候我们看见的控件显示很小，但是它的实际点击区域却比较大。这里我就是这里处理，这样既保证了UI的显示效果，也保证了一定的用户体验。这里的点击事件是绑定在<view class="star">上面的。

.js文件

首先做一个包含5个星星的数组

默认是有1颗星星的。 再就是处理点击事件，在处理点击事件前我们要先理清思路。比如我们点击第3颗星星时，需要显示的是3星满星，2颗空心。那么这个数组userStars就好处理了，数组的前3个元素是满心，后两个是空心。 代码如下：

总结

其实总体来做，五星好评并不难处理。理清思路，知道满心是什么，空心是什么，做一次，以后遇见其他平台上面的这种控件也就知道怎么处理了。

效果图

微信小程序开发(十二)富文本插件wxParse的使用

---

昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件，但是还是不成功，我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了wxParse-微信小程序富文本解析组件https://github.com/icindy/wxParse。

基本使用方法

• Copy文件夹wxParse

• 引入必要文件

• 数据绑定

• 模版引用

注意点

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的，只要保证js文件和wxml文件里面变量名一致即可。

实例

实例结构

page页面是测试页面。

wxml文件

wxss文件

js文件

效果图

微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复

---

问题描述

仔细看报错，我们会发现是wxParse.js文件里面的wxParseImgTap方法里面有Bug。没有imageUrls这个属性。

分析问题

后来把wxParse插件的源码都看了一次，也修复了这个bug。其实修复这个bug不需要看看那么多，只需要看wxParse.js文件里面的部分代码即可。 既然问题是找不到imageUrls这个属性，那么我们就让他找到。

看打印信息

打开调试看打印信息： 在wxParse.js文件的wxParse方法中有一个打印：console.log(JSON.stringify(transData, ' ', ' '));。直接先看打印的结果： 数据很长，我们就这么看：console.log(transData);

这里我们看见了imageUrls这个属性。

我们发现这样的三行代码：

这是在把transData的数据赋值给bindData了。那么我们就可以肯定bindData这个对象里面是有我们需要的imageUrls了。剩下的就是取到这个imageUrls属性了。 但是在上面的代码中有这么一行：that.setData(bindData);。我们知道这个setData方法是微信小程序的，但是作者在wxParse.js文件里面并没有定义这个方法。继续往下看：

这里作者这么取得值：urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表，这里又有问题，that.data[key]是微信小程序取值的方式。这里又错了。

解决问题

其实在上面的问题描述中我们已经知道了是什么问题，也定位了问题。但是要解决问题，通常我们不能盯着一个点看。我们要带着问题去解决问题。 既然是找不到imageUrls，我们就让他找到。 1.在wxParse.js文件里面的wxParse方法如下修改：

2.在wxParseImgTap方法里面如下修改：

效果图

总结

其实问题的核心还是误用了setData方法导致的。仔细看了一下，在wxParse.js文件里面作者4次使用了setData方法和4次使用了取值that.data。最后，有问题不要怕，细心看报错，带着问题一点一点的调试。

微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多

---

之前在做原生app开发的时候，下拉刷新和上拉加载更多是使用的比较多的一个功能了。现在在做微信小程序开发，小程序只提供了下拉刷新的接口。那么下拉刷新和上拉加载更多就需要我们换个思路实现了。

关于scroll-view

什么是scroll-view

scroll-view：可滚动视图区域。

scroll-view的属性

注意点

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

Bug & Tip

1. 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2. scroll-into-view 的优先级高于 scroll-top
3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部 在这里其实也就说了在使用scroll-view时是不能使用onPullDownRefresh了。

效果图

代码实现

wxml文件

这里就是页面结构，上下都是下拉和上拉才会显示的。中间的scroll-view才是滚动视图。

js文件

分析

这里js代码里面其实就是处理逻辑。上拉的时候我们需要在数组contentlist的后面拼接数据和处理请求的页码；下拉的时候我们需要把当前页码设置成1，contentlist取当前网络请求的数据。网络请求getData函数上拉下拉的区分是通过当前页码值区分的。 在scroll-view的上拉和下拉事件中，我都加了一个定时，这里是为了延长上拉下拉视图的显示时间。

微信小程序开发(十五)获取位置

---

准备工作

准备工作就是看小程序的文档-小程序-获取位置 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject 。 这里小程序提供了一个接口wx.getLocation(OBJECT)。

接口参数

这里主要是那个type参数。

success返回

这里我们可以看见返回的数据里面和位置相关的只有经纬度latitude和longitude。但是这个是数字，用户并不需要关系这些也看不懂，用户只需要知道当前定位的城市，那么只调用这一个接口是不行。我们需要逆向地址解析。

逆向地址解析

什么是逆向地址解析

这个说白了就是根据经纬度获取所在位置的国家、省、市、区和接到等信息。其实还有正向解析，这个就是一个相反的过程了。

腾讯位置服务

腾讯位置服务 http://lbs.qq.com/index.html腾讯提供了一些接口可以调用。

获取密匙

登录–控制台–密匙管理

填写相关信息

这里主要是应用于这里要注意。小程序端就选择浏览器，服务端使用腾讯接口就选择服务端。

微信小程序JavaScript SDK

文档地址：开发–微信小程序开发–微信小程序JavaScript SDK http://lbs.qq.com/qqmap_wx_jssdk/index.html。

使用步骤

主要是小程序示例部分需要详细说明。

开发实例

1.项目中添加微信小程序JavaScriptSDK 我是把下载的qqmap-wx-jssdk.js放在了这里。

2.页面js文件使用

首先在Page外申明两个变量：

在实例化

调用接口

这里首先调用wx.getLocation获取到经纬度之后再调用腾讯位置服务的reverseGeocoder接口即可。剩下的就是处理返回的数据显示了。

服务端WebService API的使用

上面介绍的使用小程序端的。其实仔细看调试模式和返回的数据，还是调用的是服务端WebService API http://lbs.qq.com/webservice_v1/index.html。反而还需要把微信的域名作为小程序的一个安全域名，这个我是不能忍的，我一个小程序，为什么我要添加两个不同的域名呢，而且还有一个是别人的，而且这样做也不利于以后的维护，如果项目不使用腾讯的位置服务而是百度、高德什么，那是不是我就需要修改小程序端的代码了，甚至还要写服务端代码。为什么不一次搞定了。 所以这里就有必要使用一下服务端WebService API http://lbs.qq.com/webservice_v1/index.html。

获取密匙

这一步和上面类似，只是在生成密匙时我们选择的应用于是选择服务端。

服务端逆向解析

首先看文档逆地址解析(坐标位置描述) http://lbs.qq.com/webservice_v1/guide-gcoder.html。

接口说明： 1.该请求为GET请求 http://apis.map.qq.com/ws/geocoder/v1/?location=

2.请求参数

这里其实我们只需要传递location和key参数即可。

3.实例 http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

服务端代码

小程序客户端代码

上面我开放了我们接口，方便大家调用。 接口：https://api.hgdqdev.cn/api/tengxunmap，GET请求 参数：lat， 参数格式：var lat = latitude + ',' + longitude，比如：39.984154,116.307490 返回:

至此小程序的获取位置介绍完毕。

总结

其实使用小程序的接口还是很方便的。理清思路，看文档即可完成开发。 但是还是有一点小小的建议，既然小程序是运行在微信里面的，微信是可以获取到用户当前所在城市的，我们为什么小程序只能获取到地理左边。

微信小程序开发(十六)页面传值

---

小程序页面传值的方式

这里正向传值有3种，反向传值有2种，如有遗漏欢迎补充。 这里的url传值只能是正向传值，其他的本地储存和全局的app对象既可以正向传值也可以反向传值。

项目结构

效果图

正向传值的实现

url传值

url传值，希望你已经看了wx.navigateTo(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html。

这里说了页面路劲可以像GET请求一样拼接参数，那么怎么获取这个参数呢? 这个不知道大家发现没，在每个页面的.js文件里面都默认会生成生命周期的几个方法，其中：

这个是待有参数options的。这里就需要利用它了。

A页面代码

B页面代码

本地储存

小程序-数据缓存 https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxsetstorageobject这里大家自己去看。这里不做详细说明。

A页面代码

B页面代码

全局的app对象

这个大家看了小程序新建项目时生成的代码就知道怎么用了。

A页面代码

B页面代码

反向传值的实现

本地储存

B页面代码

A页面代码

全局的app对象

这个大家看了小程序新建项目时生成的代码就知道怎么用了。

B页面代码

A页面代码

全部代码

app.js

A页面

wxml

js

B页面

wxml

js

总结

关于页面传值，其实也就是搞清楚需求的前提下，利用已经掌握的技术来实现，只是这个应用是用来页面传值。

url传值

我们有时为了浏览器不缓存一些文件，我们在文件后面加上了时间戳，文件还是一样的；或者我们在已经打开的网页后面自己像GET请求方式那样添加参数，eg: https://www.baidu.com?baidu=李彦宏，和打开百度https://www.baidu.com页面还是一样的。

本地存储

我们一般是存储一些信息在本地，但是这个有存也有取，尽然可以存进去，我们只需要在需要的地方存取数据就行。这个还可以实现跨页面传值。

全局app对象

这个就是要搞清楚全局的概念和单例了。作为小程序开发，看看每次新建小程序项目时自动生成的代码就知道这个怎么用了。 至于以后的浏览器端的开发就需要自己去实现了。

总的来说页面传值基本就这，两个方向，三大类。搞清楚各自的特点就很好操作了。以后做浏览器端的项目开发时就很好处理了。

微信小程序开发(十七)模板消息

---

最近两个月在重构公司的一个商城项目，小程序端，PC端，后台部分也大部分是我做的。比较忙，所以博客写的比较少。这两天在调试微信支付之后个用户发送一个模板消息的功能。一直出现errcode: 41028, errmsg: “invalid form id hint:的错误。在网上看了一个基本没有一个正确的答案，基本都是照搬微信的文档，并没有说出调试的细节。关于文档，大家可以直接看微信的文档-小程序模板消息 https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html。下面写下我的整个开发过程，首先请详细阅读微信相关的文档。

选择模板

1.登录小程序的微信公众平台-模板库

选择你需要的模板。 2.设置那你需要的字段

3.获取模板消息ID 在完成上面两步之后，在我的模板里面就可以看见了。复制模板ID即可。

获取ACCESS_TOKEN

注意点

关于ACCESS_TOKEN这块大家注意两点即可： 1.access_token 是全局唯一接口调用凭据，开发者调用各接口时都需使用 access_token，请妥善保存。access_token 的存储至少要保留512个字符空间。 2.access_token 的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的 access_token 失效。 微信给了一种access_token的解决办法：

我没有使用中继服务器。我是保存在本地数据库，给一个接口去获取这个access_token。具体的业务逻辑： 1.调用后端写的获取access_token接口， 2.数据库没有access_token记录，就向腾讯获取一个保存数据库并返回， 3.数据库有记录且最新一天记录的保存时间距离现在时间小于1小时55分，就直接把这个access_token返回给前台， 4.数据库有记录，但最新一条的保存时间距离现在时间大于1小时55分，就重复步骤2. 为什么是1小时55分呢？上面的截图第2点 目前 access_token 的有效期通过返回的 expires_in 来传达，目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新 access_token。在刷新过程中，中控服务器对外输出的依然是老 access_token，此时公众平台后台会保证在刷新短时间内，新老 access_token 都可用，这保证了第三方业务的平滑过渡这我预留5分钟，以避免这个问题。

代码实现

发送模板消息

发送模板消息就好处理了。

这个就是一个处理POST请求参数的问题了。 这里需要注意的是：form_id 是 表单提交场景下，为 submit 事件带上的 formId；支付场景下，为本次支付的 prepay_id。 我的是支付成功的通知，这里一定保存整个支付流程都是在真机上面调试，一定不能是手机扫码调试工具上面的二维码支付，不然会一直报错：errcode: 41028, errmsg: “invalid form id hint:。 小程序端发送模板消息：

至此发送模板消息是做完了。但是这里有存在一个缺陷，如果是线上的小程序版本，需要及时修改模板消息格式就不好了。后来我做的是后台发送模板消息。这个修改就很好做了，这里不再赘述。

注意

一定整个支付流程都是在自己的手机上面完成，一定不要去扫调试工具生成的二维码支付。