文章分类: 前端开发

Javascript，CSS3，HTML5…各种前端开发话题归档

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

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

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

以下是原文：

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

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

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

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

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

CentOS7.4安装新版node.js过程记录整理

| 发表评论 | 7,248 人已阅

发现阿里云的云主机可以按最短一周时常购买了，以后做测试环境，花点小钱买台短期主机做测试的成本又降低了（虽然ECS总体还是涨价了）。这次想尝试一下在最新的CentOS下安装node.js会不会踩坑，于是开干。

在失败了多次，东拼西凑了很多文章和教程后，终于把nodejs（8.7.0）给装上了，下面整理所用命令行以及过程。 查看详细 »

ES6学习笔记 – 字符串和数值扩展

| 发表评论 | 5,378 人已阅

记录一下几个简单的ES6的字符串和数值方法

字符串扩展

字符串查找（当前版本Chrome已支持）

let a = "hello world!";
a.startsWith("hello"); //true
a.endsWith("!"); //true
a.includes("w"); //true
 
//第二个参数表示搜索位置索引
a.startsWith("ello" , 1); //true
a.endsWith("hello" , 5); //true
a.includes("hello" , 5); //false

查看详细 »

ES6学习笔记 – let、const和块及作用域

| 2 条评论 | 5,215 人已阅

最近粗略看了一下ES6的一些特性，如果运用成熟，写JS的感觉将比ES5要愉悦很多。随着微信小程序开发量的增加，自己也觉得是时候拿起ES6了。买了一本阮一峰的《ES6标准入门》，从第二章开始慢慢看了起来。在自己的博客上也整理一些笔记，记录学习轨迹。

let 和 const 命令声明的变量，有严格的块级作用域限制，当前{}内声明的变量，在当前{}外无法使用；同一作用域下在变量声明之前，也不能使用；否则都会报错。另外，不允许重复声明同一变量。

for(let i=0 ; i<3; i++){
  let i="a";
  console.log(i); //输出三次a；在()内声明的i和在{}内声明的i并不在同一作用域内
}
console.log(i); //报错

查看详细 »

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

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

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

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

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

正则表达式学习笔记

| 发表评论 | 4,344 人已阅

做项目的时候，正则表达式其实用得很少，而且大部分用得到的正则表达式都可以通过搜索引擎找到。因此这么多年来虽然已经多次研读正则表达式的文档，但偶尔要自己写的时候还是会脑子卡壳，求助谷歌…
好吧，再好好的理解一下，做个笔记，争取减少求助搜索引擎的次数。本文并非系统整理正则表达式的概念，而是加强巩固自己淡忘的一些概念和知识点。

正则表达式通过构造函数使用方法

var str = "He is a boy. She is not a boy."
var reg = new RegExp("\\bis\\b");
str.replace(reg, "IS");
//"He IS a boy. She is not a boy."
var reg = new RegExp("\\bis\\b" , 'g');
str.replace(reg, "IS");
//"He IS a boy. She IS not a boy."
 
//另一种写法：正则表达式前后用/包含，g参数加在最后
str.replace(/\bis\b/g, "IS");

查看详细 »

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

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

首先，经过测试，使用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,154 人已阅

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

解决iOS浏览器中无法用focus事件调出手机键盘的问题

| 1 条评论 | 12,183 人已阅

今天在做一个H5项目的时候，发现使用JS的focus命令在iOS浏览器（包括微信）中无法调出键盘。试过N种方法都不起作用，谷歌了一些国外的帖子后，才知道iOS下，通过JS调用键盘是被禁止的，亦或许是一个bug。在这种情况下，其实focus事件已经执行了，只是iPhone键盘跳不出来，比较蛋疼。

因此在输入框上调用focus事件，无论原生，还是jQuery类似下面的JS代码无效：

$("#inputElement").focus();

但是可以监听其他点击事件，在回调中添加这个命令就可以了，比如 查看详细 »

让jQuery UI draggable兼容移动端并且模拟click点击事件，兼容安卓

| 1 条评论 | 8,139 人已阅

用jQyery UI的draggable可以很方便地在PC端实现页面元素的可拖放，不过jQyery UI不是为移动端而写的，因此这个draggable方法在手机上无效。这么普通的问题，当然已经有了现成的解决方法，那就是再加一个jQuery UI Touch Punch插件即可。jQuery UI Touch Punch下载点这里。

这样组合后在手机上测试基本完美，不过很快发现在安卓手机上，无论是原生浏览器还是微信内置浏览器上，都无法在draggable的元素上执行click点击事件，其子元素也不行；在iOS上倒是一切正常。经过排查，发现其实并非click事件不能执行，而是安卓上对touch的敏感度实在太大，太容易覆盖掉click事件，其实快速的多点几次click还是有一定概率能执行的。但这样显然不符合项目的要求了，于是我考虑用touchstart-touchmove-touchend来做一些代替click的事。其实就是判断一下手指滑动的距离，距离大的就什么都不变，当做滑动，距离小的就当作click事件去做点击的事。

这种low问题就不多展开了，直接上代码， 查看详细 »