博客 (29)

微信小程序 login 后，在用 code 换 session 时，如果小程序绑定了微信开放平台，应该会返回 unionid。

文档：https://developers.weixin.qq.com/miniprogram/dev/api-backend/code2Session.html。

但实际上部分用户仍然是没有 unionid 的，把上述接口返回的数据记录下来如：

仔细阅读官方 UnionID 机制说明，通过用户授权 wx.getUserInfo 才会保证有 unionid 返回，否则只会在“用户关注了绑定同一微信开放平台的同主体的公众号”等情况下才会返回 unionid。

确保获取 unionid 流程参此文。

Input string is not a valid interger. Path 'batteryLevel', line 1, position 447.

使用 uni-app 开发小程序的时候，获取系统信息（getSystemInfoSync()）在 iPhone X 上报错，原因是电池电量值无法转换为 int 型。出现的情况是偶发性的，但一旦出现，一段时间内会一直出现（可能等电量值更新了才会正常吧）。不知道是 uni-app 的 bug 还是微信小程序的 bug。问了度娘和必应国际，暂时没有找到答案。

① 摄像头扫码：无法直接用“识别二维码”，必须把二维码发送到身边的其它设备，再使用手机摄像头完成扫码。

② 成为运营者要求绑定银行卡；成为运营者将占用“微信号绑定的帐号”数量，详见说明。若达到上限，只有法定代表人可继续成为运营者。在公众号“公众平台安全助手”中可查询绑定的帐号。

另外：

• 小程序添加/删除体验成员无须管理员授权

• 如果管理员未关注公众号“公众平台安全助手”，待测……
  

常用获取英文的方法是查看英文版 App。

微信：WeChat

小程序：Mini Programs

公众号：Official Accounts

订阅号：Subscriptions

朋友圈：Moments

已登录的：Logged

服务通知：Service Messages

置顶：Sticky on Top / Remove from Top

发送给朋友：Share to Friends

微信号：WeChat ID

钱包：Wallet

余额：Balance

资金/零钱/基金：Funds

金额：Amount

明细：Details

账单：Transactions

资产：Assets

收入/收益：Income

财富：Fortune

登录：Log In / Login

退出登录：Log Out / Logout

第一种方式，直接执行上一页的原生方法：

var pages = getCurrentPages();
if (pages.length > 1) {
	var prePage = pages[pages.length - 2];
	prePage.onPullDownRefresh();
}

第二种方式，在上一页的 onShow() 中对数据进行更新。

推荐使用第一种方式，但只能调用原生方法，不能直接调用 methods 中的自定义方法（详见）。第二种方式的缺点是，有时候不需要在返回上一页时更新数据，但它仍会执行。

当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。

但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。

这个场景会在小程序开发的时候遇到。

我们可以在客户端用 JS 进行处理，也可以在服务端用类似的方法处理（使用正则表达式）。参此文

这里使用 HtmlAgilityPack 通过递归节点来处理：

/// <summary>
/// 给所有指定节点添加样式
/// </summary>
/// <param name="html"></param>
/// <param name="tag">节点名称（小写），如：img</param>
/// <param name="styles">要添加的样式，如：max-width:100%;</param>
/// <returns></returns>
public static string AddStyleToHtmlNode(string html, string tag, string styles)
{
    HtmlDocument doc = new HtmlDocument();
    doc.LoadHtml(html);

    for (var i = 0; i < doc.DocumentNode.ChildNodes.Count; i++)
    {
        doc.DocumentNode.ChildNodes[i] = AddStyleToHtmlNode(doc.DocumentNode.ChildNodes[i], tag, styles);
    }

    return doc.DocumentNode.OuterHtml;
}
private static HtmlNode AddStyleToHtmlNode(HtmlNode node, string tag, string styles)
{
    if (node.Name == tag)
    {
        var style = node.GetAttributeValue("style", null);
        node.SetAttributeValue("style", ((string.IsNullOrWhiteSpace(style) ? "" : style.Trim() + ";") + styles).Replace(";;", ";"));
    }
    for (var i = 0; i < node.ChildNodes.Count; i++)
    {
        node.ChildNodes[i] = AddStyleToHtmlNode(node.ChildNodes[i], tag, styles);
    }
    return node;
}

直接调用：

Content = zStringHTML_190126.AddStyleToHtmlNode(Content, "img", "max-width:100%;height:auto;");

当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。

但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。

这个场景会在小程序开发的时候遇到。

网上一般使用正则表达式直接将 <img 替换成 <img style="max-width: 100%; height: auto;" ，缺点是如果该 <img /> 本身就带有 style 属性，那么会出现一个标签两个 style，很多情况导致这两个样式同时失效，所以我们应针对有 style 和无 style 分别处理。

// 把 <img src="a.jpg" style="display: block;" /> 替换成 <img src="a.jpg" style="display: block;;max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+[^>]*style\s*\=\s*['"][^'"]*)(['"])/gi, '$1;max-width:100%;height:auto;$2');

// 把 <img src="b.jpg" /> 替换成 <img src="b.jpg" style="max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+((?!style).)+?)(\/?>)/gi, '$1 style="max-width:100%;height:auto;" $3');

复制以上代码时，半角空格可能会变成全角空格，请注意修正。

当有 style 时，我们将 max-width: 100%; height: auto;追加在原样式之后，以重写原样式。这里没有直接判断原样式是否以 ; 结尾，而是直接追加 ;，这并不会影响实现展示效果。

在判断没有 style 用到正则表达式的“断言”，参：https://blog.csdn.net/xuyangxinlei/article/details/81359366

延伸阅读：C# 用 HtmlAgilityPack 给 HTML 节点加上 style

本文基于初期只开放微信小程序，后期向 iOS/Android/H5 等多终端开放的场景设计，且并不要求“登录即必须绑定手机号码”。如初期即同时多终端推出请参考此文。

项目初期，微信小程序以 openid 作为用户的唯一标识，因此在其它平台也需要用微信来授权登录。但同一微信用户在小程序和 App 上使用微信授权登录后的 openid 并不相同，必须同时绑定到微信开放平台，通过 unionid 关联用户，作为用户的唯一标识。

uni-app 的 input，当 type = "text" 时，设置 confirm-type = "next" 可以提供键盘的“下一项”，通过 @confirm 触发设置下一个文本框的焦点，即可实现只操作键盘即可完成表单填写。

我们以从 a 组件跳转到 b 组件为例：

<input v-model="a" type="text" confirm-type="next" @confirm="moveNext('b')" />

uni-app 的组件只有属性和事件，不提供方法，那么我们只能设置提供了 focus 属性的组件的焦点。

<input v-model="b" :focus="focusList['b']" />

moveNext() 方法实现：

moveNext(dom){
	this.focusList[dom] = true;
}

当然 focusList 必须先定义并初始化，否则设置 focus 为 true 将失效：

data() {
	return {
		a: '',
		b: '',
		focusList: {
			b: false
		}
	}
}

几个注意点：

• confirm-type = "next" 仅支持微信小程序

• “下一项”按钮效果是一次性的，使用一次后再次在 a 上触摸“下一项”将不再跳转到 b，即使在 moveNext() 中先设置为 false 再设置为 true 也没用

• 其它组件也可以通过自带的方法实现跳转到带 focus 属性的组件（如在 picker 的 @change 中设置 this.focusList['b'] = true）

• 限制于 confirm-type = "next" 只当 type = "text" 时有效，因此非文本键盘（如数字键盘）就不能提供“下一项”功能

• textarea 组件的右下角始终是“换行”，由其右上角的“完成”按钮来实现“下一项”功能

• textarea 组件在“下一项”跳转过程中，组件可能会被 tabBar 遮挡（几率很大）
  

见流程图：

微信小程序建议使用 getPhoneNumber 接口来获取用户授权的手机号码，以提高用户体验、节省开发成本、节省短信运营成本。