标签 微信小程序 下的所有文章

WooCommerce微信小程序开发 – 自己写一个购物车查询接口

| 发表评论 | 1,195 人已阅

做基于WooCommerce的微信小程序，一个绕不开的技术点是需要自己写购物车的接口。WooCommerce至今都没有在自带的Rest API中提供购物车接口，我一直认为这是一个遗憾。

在查了一些资料后，我大致能明白WooCommerce不提供购物车接口的原因，因为大部分的第三方并不需要WooCommerce来提供购物车数据。如果你用WordPress+WooCommerce做后台，开发了一款独立APP，用户可以在APP上完成完整的购物流程，最轻便的做法是不让WooCommerce提供购物车数据，购物车只在APP本身提供即可，WP后台只负责提供商品和订单信息足矣。所以WooCommerce提供的Rest API是足够完成一款普通的第三方应用的需求的。但我们考虑另一种情况，如果你的WooCommerce同时以网站和APP两端提供服务，即同一个用户既能登录网站购物，也能从APP购物，那么你就要考虑购物车的数据同步问题了，要让网站的购物车和APP的购物车同步，我们就不得不需要WooCommerce端有购物车接口了。

这篇博客是对去年写过的一篇“WooCommerce购物车对象使用以及方法函数概括”，进行的一个扩展。在熟悉了购物车一些对象和方法使用后，我们是可以自己写一个购物车接口的。

首先定义一下接口：

1
2
3
4
5
6
7
8
9
10
11
12

add_action('rest_api_init', function(){
	//from: https://blog.brain1981.com
	register_rest_route('wx_app/v1', 'cart', array(
		'methods' => 'GET',
		'callback' => 'brain1981_rest_wc_cart_list',
		'show_in_index' => false,
		'permission_callback' => function ($request) {
			if (current_user_can('read'))
				return true;
		}
	));
});

访问这个接口的地址就是 https://你的域名/wp-json/wx_app/v1/cart， 主要业务代码放在brain1981_rest_wc_cart_list函数中。下面是这个函数的写法： 查看详细 »

WooCommerce微信小程序开发，为Rest API补充图片信息

| 发表评论 | 2,120 人已阅

WooCommerce微信小程序开发使用WooCommerce的原生Rest API，接口中是缺少一些必要的图片信息的，这里列举两个地方：

1. 产品接口中，所有的产品图片都只有原图URL，没有带上thumbnail和其他WordPress生成的尺寸：

通常商店管理员并没有太多图片的优化意识，会直接把多达几M的产品图上传。WooCommerce的主题多半会生成一些必要的小尺寸图片分别给产品列表以及购物车等地方加载，但Rest API中并不会有这些信息。微信小程序的产品列表页也是需要这些小图的，于是我们需要在接口中把这些小尺寸产品图也加入进去： 查看详细 »

WordPress项目 – WooCommerce微信小程序定制开发

| 发表评论 | 1,902 人已阅


最近上线的一个项目：WooCommerce定制微信小程序。基于之前的WordPress的网站（也是由我开发）后端，利用WordPress和WooCommerce的扩展能力，定制了小程序使用的API；小程序的前端则是从无到有的独立开发。能对WooCcommerce做到这样的定制扩展的建站商非常少，我们的技术优势在此项目中得到了充分体现。
查看详细 »

基于WordPress的微信小程序支付功能开发

| 2 条评论 | 4,327 人已阅

我在2018年的时候总结过一篇微信小程序支付功能开发与踩坑经验总结，当时因为网上相关文档和资源的缺乏，文章获得了很多关注和转载，并且也有很多人指出了其中的不足。主要不足之处就在于那篇文章把所有的签名字串封装都放到了前端，也就是小程序里，通过JS实现，其中还涉及到了商户key这样的敏感字段，因此是不安全的。不过在3年前微信本身对这块也没有做很严格的限制，比如我把对“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求放在小程序里，那时候照样是能运行的。

近期，把小程序的基础库改成近期版本后，我发现“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求已经不能放在小程序里了，即使此域名已经加入到request安全域名下也无效，微信那边会自动把你加入的这个域名过滤掉。这就表示一系列的请求必须放到服务器上完成了。因此我重新整理了一下后端的代码，PHP版本的。并且因为我的微信小程序都是基于WordPress做后端的，索性把自定义的接口这块也缝合过来。

当前最新版调试通过：

打包代码如下： 查看详细 »

微信小程序支付功能开发与踩坑经验总结

| 30 条评论 | 58,481 人已阅

2021年3月11日更新：
本文虽受到一定关注，但时隔3年多，其中代码以及安全性都已过时，为避免各位踩坑，请移步我的另外一篇文章：https://blog.brain1981.com/2354.html
本文评论区大家所提出的其他问题，也都已在这篇博客列出的代码中解决，如果你不是用WordPress也没关系，其中PHP部分稍加修改即可使用。

以下是原文：

早有耳闻微信小程序的支付功能开发是一步一坑，这两天果然踩了个遍。除了简要到令人愤怒的官方文档外，网上所有能搜到的相关文章，也没有任何一篇提供的代码是能够顺利跑通的。好在还有一部分前人的经验可以吸取，再加上个人的一点直觉引导，终于在凌晨的时候真机测试通过。

趁热打铁把踩过的坑罗列一遍，最后会附上真机跑通的代码。

首先是小程序支付功能的申请。在半年前我有另一个小程序项目，虽然当时没有开通小程序微信支付的需求，但是我留意过应用号（小程序号）后台微信支付的相关选项。当时，这个小程序因为绑定过已认证的服务号，因此小程序支付是可以直接申请的，无需任何费用。但是这次的项目，同样是另一个已经绑定过认证服务号的小程序，在微信支付界面，提示我要认证当前的小程序号才能开通微信支付，也就是说，绑定服务号还不够，必须把这个小程序号也交300元认证后，才给开通支付功能！真的很坑，好在客户没有什么怨言，非常配合地就把认证给办了…

一天后小程序号认证通过，就有了申请支付的入口：

果断选右边那个，根据给出的提示，到商户平台里面用小程序的appid绑定就行了。 查看详细 »

微信小程序地图开发经验更新

| 1 条评论 | 10,737 人已阅

几个月前踩过一个坑，在微信小程序页面上，用setData更新地图上的marker数据，地图并不会改变，而且这个问题当时只在真机上调试才会发生，之前在小程序开发工具中调试并没有发现，使我开发到很晚还要回过头来找问题，浪费了不少时间，当时也用一篇博客记录了这个问题 https://blog.brain1981.com/1696.html，用地图组件控制接口wx.createMapContext的translateMarker方法修改坐标，绕过了这个坑。

大半年过去了，似乎已经淡忘了这个问题，这几天那个小程序有个较大的继续开发需求，使我又回到了小程序开发中来。测试了一下之前的地图，发现translateMarker修改坐标在真机上居然也有小概率会失效。原因暂时不明。微信小程序在这半年里面已经更新过二十多个版本，自然也没办法去追述到底是更新导致了我的问题，还是当时就没写好… 不过时隔多日再回头看文档，发现还是有一些新东西可用的。

先想办法解决这个老问题，查了一下资料，原来map这种级别高的系统原生组件，是不会跟着页面数据的修改而重新渲染的。如果要更新map上的marker，势必要重新渲染map，那么就要强制渲染一下。最简单的方法是给map组件上添加一个if语法。通过绑定map的值（0或1），修改map组件的显示与否 查看详细 »

WordPress用REST API避免微信小程序中数据加载超过长度限制

| 2 条评论 | 6,042 人已阅

今天在开发小程序的过程中发现一个旧的项目在加载了几十条文章数据后，就再也无法继续加载了，微信开发工具中报错“invokeWebviewMethod 数据传输长度为 1957855 已经超过最大长度 1048576”
微信小程序中数据加载超过长度限制

这是由于微信小程序规定页面的data对象最大只能装载1M的数据，而我的数据源都是很长的文章，在加载了50篇左右就超过1M了。显然用WordPress默认的REST API格式是无法突破这个瓶颈了。于是就要想办法修改API，在要加载大量文章的列表页中，把文章正文内容去掉，就能减少90%的数据量，反正列表页也不需要显示正文；只在文章详细页上加载当前文章的所有数据。

首先是去掉默认API的文章详细内容，并且删除掉一些觉得没用的字段： 查看详细 »

微信小程序中使用地图和定位的一些坑和经验

| 10 条评论 | 62,011 人已阅

首先，经过测试，使用GCJ02（火星坐标）比WGS84（GPS）的坐标在计算距离的时候更为精确。在微信小程序中使用内置接口获取用户坐标，代码放在app.js里：

App({
  getLocation: function () {
    var that = this
    wx.getLocation({
      //type: 'wgs84',
      type: 'gcj02',
      success: function (res) {
        that.globalData.latitude = res.latitude
        that.globalData.longitude = res.longitude
        //var speed = res.speed
        //var accuracy = res.accuracy
      }
    })
  }
 
})

查看详细 »

七牛CDN防盗链开启后，微信小程序无法加载其资源问题解决

| 发表评论 | 13,129 人已阅

最近在学习开发微信小程序的时候碰到了形形色色的问题，待我有空多整理一些笔记，这次先记录一个简单的。我习惯用七牛CDN作为自己开发的网站静态资源存储分发，并且为每个资源库设置防盗链白名单。在开发小程序之初，我就已经把这两个域名加入到了白名单中：
*.qq.com
*.wechat.com
因此就想当然的以为这样设置，微信小程序读取CND资源就不会有问题。当然，我在开发过程中为了避免碰到这样那样的问题，是先关闭了防盗链的。小程序完成后提交审核，同时我顺手打开了防盗链，刷一下小程序，结果发现所有云上的图片都打不开，开发工具报403错误：
微信小程序无法加载七牛CDN资源问题
查看详细 »