常用获取英文的方法是查看英文版 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
本文基于初期只开放微信小程序,后期向 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 遮挡(几率很大)
本文作为 多平台用户登录模块设计 的扩展设计,即以手机号作为用户的唯一凭证。
官方文档的小程序登录时序:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
(图片摘自 2018.10.30)
session_key 是密钥,仅保存于开发者服务器,用于将小程序通过前端接口获取到的数据解密来验证其真实性。详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html
小程序与服务器是通过自定义登录态来识别用户身份的,以下简称口令(token)。
由于微信未告知 session_key 的有效期,那么为保证小程序发起业务请求成功,token 须要永久有效,但这会带来安全隐患。
如果设置 token 的有效期(如 7200 秒),那么小程序发起业务请求后,服务器必须把 token 的验证结果告知小程序,若失效则重新登录。
微信授权登录(含绑定手机号码)流程图
子流程:授权登录
子流程:绑定手机号
为保证数据安全,针对每个须要授权登录的业务请求,服务器都都会检验 token 的有效性。如果小程序同时发起多个业务请求,并几乎同时收到 token 过期,那么会同时发起多个重新登录流程,服务器多次 code2Session,重新生成多个 token 返回到小程序,那么小程序最终保存的 token 可能不是服务器上认为的最新的一个 token。这样,如果程序设计为获取到 token 继而重新发起业务请求,可能会进入死循环。解决的方法是在同时发起多个业务请求之前先向服务器验证一次 token 的有效性,再发起多个业务请求时就不会出现都过期的情况了。
确定唯一凭证:
若项目仅提供微信端访问,那么使用微信的授权(即以微信 openid / unionid 作为唯一凭证)是一种体现注重用户体验的方式。如果项目需要应用到多个平台上,那么通过微信来授权变得不那么完美(譬如未安装微信客户端或平台不支持使用微信授权等)。因手机的使用率已明显高于电脑的使用率,再加上用户帐号实名认证的要求,以手机号码为作为帐号的唯一凭证是非常合理的。
登录唤起条件:
当用户打开需要登录授权的页面或触发需要登录授权才能执行的操作时。
场景实现:
平台 | 实现 |
微信网页/小程序 | 授权获取 openid / unionid 同时若未绑定手机号码则强制绑定(发送验证码的方式) 如果允许在微信上登录不同的用户帐号,那么需要提供【“手机号码 + 密码”登录】方式 |
手机 App | 提供【“手机号码 + 密码”登录】 提供【第三方帐号登录】,登录后强制绑定手机号码 参“京东”等 |
PC 端浏览器网页 | 提供【“手机号码 + 密码”登录】 登录框可切换成【扫二维码登录】,登录后强制绑定手机号码 |
手机浏览器网页 | 提供【“手机号码 + 密码”登录】 如果提供【第三方帐号登录】,那么可能需要在网页上手动输入第三方帐号的用户名密码,而非跳转到第三方 App 上(视第三方开放平台) |
l 【“手机号码 + 密码”登录】页面显示填写手机号码和密码框的表单,提供“忘记密码”、“短信验证码登录”、“手机快速注册”等功能。如果在可长期记住登录状态的场景中(如手机 App)也可取消密码,直接使用短信验证码登录。“手机快速注册”必须通过短信验证码实现实名认证。
l 【第三方帐号登录 / 扫二维码登录】App 中提供跳转相应第三方 App(如微信)授权登录,PC 端网页中提供微信扫二维码登录。登录获得 unionid,同时判断是否已经绑定过手机号码,若未绑则强制绑定,确保数据库中的每一条用户信息都有手机号码。
注:同一个微信帐号在不同的公众号和 App 中的 openid 不同,将这些公众号和 App 通过微信开放平台绑定后,同一个微信帐号的 unionid 是相同的,可用于判断同一用户。
流程图:
各平台登录设计:
Dark Mode 亦称为 暗黑模式、黑暗模式、暗色模式、黑夜模式、深夜模式、夜间模式 等,以下介绍几种常用软件的 Dark Mode 的设置方法。
iOS:
【iOS 13+】在 设置 - 显示与亮度 - 选择“深色”
【iOS 11+】在 设置 - 通用 - 辅助功能 - 显示调节 - 反转颜色 中开启“智能反转”。
“智能反转”缺点:第三方应用上显示的图片会以“经典反转”的方式展示。
Android:
设置 - 显示 - 主题模式,选择“暗色主题”
版本支持:Android 9.0 - Pie(Android P)
macOS:
系统偏好设置 - 通用 - 外观,低版本系统中勾选“使用暗色菜单栏和 Dock”,高版本系统中直接点击预览图选择主题。
版本支持:在 OS X Yosemite 10.10 中提供支持,在 macOS Mojave 10.14 中全新升级。
Windows:
桌面右键“个性化”(或从 Windows 设置中打开),在“颜色”选项卡,选择默认应用模式“暗”。
版本支持:Windows 10 October 2018 Update(版本 1809)
Microsoft Office:
文件 - 选项 - 常规 - Office 主题:黑色
在一个组件中设置后(如 Word),会在其它的组件中同时生效(如 Excel)。但 Visio 没有“黑色”主题(至少在 2019 中),我尝试更改为“深灰色”,Word 也变为“深灰色”,然后在未关闭 Visio 的情况下再次更改 Word 为“黑色”,Visio 界面竟然也变成了“黑色”,设置选项中为空白。
版本支持:Office 2016
Adobe Photoshop:
点开 菜单:编辑 - 首选项 - 界面,根据自已喜爱更改颜色方案。
版本支持:Photoshop CS6(可能更早),新版中已默认启用
CorelDRAW:
点开菜单:工具 - 选项,左侧展开 工作区 - 外观,主题选择“暗”或“黑体”。
版本支持:CorelDRAW X8(可能更早)
Microsoft Visual Studio:
点开菜单:工具 - 选项 即可更改颜色主题为“深色”(左侧选项卡为 环境-常规)。
版本支持:Visual Studio 2012
微信开发者工具:
点开菜单:设置 - 外观设置,选择“深色主题”
仅在文件代码面板有效
Microsoft Edge:
设置 - 自定义 - 选择一个模式 - 暗
Chrome:
在 Chrome 74 版本中支持。
其开发者工具(F12)早在 50 版本中已提供 Dark 主题,在开发者工具右上角展开竖状三点图标 - Settings - Theme: Dark
Windows 的 Chrome 的 Dark 模式无需设置,会根据 Windows 自身是否为暗模式来调整。
因其 Dark 模式不容易区分当前标签页,如需禁用 Dark 模式,参此文
Adobe Acrobat Reader DC:
点开菜单:视图 - 显示主题 - 深灰
HBuilder X:
点开菜单:工具 - 主题 - 酷黑
Code Write:
设置 - Editor - Theme - Dark(默认已启用)
本文不定时更新中……
收集了一些在开发过程中遇到的一些问题的解决方法,适合新手。
异常:
出现脚本错误或者未正确调用 Page()
原因:不小心删了第一行内容:<template>
异常:
模块编译失败:TypeError: Cannot read property 'for' of undefined
at fixDefaultIterator (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4277:24)
at mark (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4306:5)
at markComponent (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4371:5)
at baseCompile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4384:15)
at compile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4089:28)
at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\mpvue-loader\lib\template-compiler\index.js:43:18)
原因:新建的页面(简单模板)只有以下 3 个标签,须在 <template /> 中添加一些代码,如 <view />
<template>
</template>
<script>
</script>
<style>
</style>
异常:
模块编译失败:TypeError: Cannot read property 'toString' of undefined
at Object.preprocess (D:\HBuilderX\plugins\uniapp\lib\preprocess\lib\preprocess.js:56:15)
at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\preprocessor-loader.js:9:25)
原因:没有原因,纯抽风,HX 关掉再开就好了。
异常:
Cannot set property 'xxx' of undefined;at pages/... onLoad function;at api request success callback function
原因:属性未定义,例如
data() {
return {
item: { }
}
}
而直接赋值 this.item.abc.xxx = '123';
解决:
data() {
return {
item: {
abc: ''
}
}
}
问:page 页面怎样修改 tabBar?
答:官方文档未给出答案,百度了一圈也无果(2018-10-23),但有人说小程序的 setTabBarBadge() 方法设置角标是可以用的。
坑:
VM1694:1 获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级
参考文档: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
填坑:放弃使用 uni.getUserInfo 接口来获取用户信息,uni.login 可返回用于换取 openid / unionid 的 code,参:uni.login、 code2Session
坑:字符搜索(当前目录)(Ctrl+Alt+F)搜不出所有结果
填坑:顾名思义他只搜索当前目录,即当前打开文件所在目录,而非我误认为的整个项目根目录。在“项目管理器”中选中要搜索字符的目录即可。
坑:uni.navigateTo() 或 uni.redirectTo() 没反应
填坑:这两个方法不允许跳转到 tabbar 页面,用 uni.switchTab() 代替。
坑:使用“Ctrl+/”快捷键弹出“QQ五笔小字典”窗口
解决:打开QQ五笔“属性设置”,切换到“快捷键设置”选项卡,把“五笔小字典”前的勾取消(即使该组合键是设置为Ctrl+?)。
坑:<rich-text /> 中的 <img /> 太大,超出屏幕宽度
填坑:用正则表达式给 <img /> 加上最大宽度
data.data.Content = data.data.Content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
坑:无法重命名或删除目录或文件
填坑一:“以管理员身份运行”HBuilder X 后再试。
填坑二:关闭微信开发者工具、各种手机和模拟器后再试。
填坑三:打开“任务管理器”,结束所有“node.exe”进程后再试。
坑:
thirdScriptError
sdk uncaught third Error
(intermediate value).$mount is not a function
TypeError: (intermediate value).$mount is not a function
Page[pages/xxxx/xxxx] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
Page is not constructed because it is not found.
填坑:关闭微信开发者工具、各种手机和模拟器后,删除“unpackage”目录。
坑:
Unexpected end of JSON input;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected end of JSON input
填坑:给 uni.navigateTo() 的 url 传参时,如果简单地将对象序列化 JSON.stringify(item),那么如果内容中包含“=”等 url 特殊字符,就会发生在接收页面 onLoad() 中无法获取到完整的 json 对象,发生异常。
uni.navigateTo({
url: "../news/view?item=" + JSON.stringify(item)
})
所以应该把参数值编码:
uni.navigateTo({
url: "../news/view?item=" + escape(JSON.stringify(item))
})
如果是一般的 web 服务器来接收,那么会自动对参数进行解码,但 uni-app 不会,如果直接使用:
onLoad(e) {
this.item = JSON.parse(e.item);
}
会发生异常:
Unexpected token % in JSON at position 0;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected token % in JSON at position 0
需要解码一次:
onLoad(e) {
this.item = JSON.parse(unescape(e.item));
}
需要注意的是,unescape(undefined) 会变成 'undefined',如果要判断是否 undefined,应是 unescape 之前。
坑:图片变形
填坑:mode="widthFix"
坑:页面如何向 tabBar 传参
填坑:全局或缓存
坑:编译为 H5 后,出现:Access-Control-Allow-Origin
填坑:参阅
坑:编译为 H5 后,GET 请求的 URL 中出现“?&”
填坑 :客户端只求 DCloud 官方能够尽快修复这个 bug,IIS 端可以暂时用 URL 重写来防止报 400 错误,参此文。
坑:[system] errorHandler TypeError: Cannot read property 'forEach' of undefined
填坑:待填
你可能打开了假的工具[捂嘴]
查看你打开工具的图标快捷方式是指向到哪的?
打开属性,点击“打开文件所在的位置”,是不是那个英文名的文件是高亮的?
你可以直接双击打开这个英文工具“wechatdevtools.exe”,确实打开的是上面的 NW.JS 界面,
然后打开中文名的工具“微信web开发者工具.exe”,正常运行。
那么就在这个文件上右键,选择你喜欢的打开方式吧:“固定到开始屏幕”或“固定到任务栏”或“发送到桌面快捷方式”。
附微信web开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
WGS-84(地球坐标)
用于 GPS 模块 及 Google Earth
GCJ-02(火星坐标、国测局坐标系)
用于 Google Map、必应-中国地图、高德、腾讯、图灵、阿里地图,是对地理位置的一次加密
BD-09(百度坐标)
仅用于百度地图,是对火星坐标的再次加密
CGCS 2000(国家大地坐标系)
用于天地图,与 WGS-84 最大差异 0.11mm
坐标转换:https://github.com/wandergis/coordtransform
微信网页开发的获取地理位置接口(wx.getLocation)默认使用 wgs84,可选 gcj02。
微信网页开发的使用微信内置地图查看位置接口(wx.openLocation)支持 gcj02。