小程序常见问题/使用

1. currentTarget.datasett和 target.datatset区别

e.currentTarget 代表的是，注册了监听点击事件的组件。在本例中，就是外层的View（包含了两个TextView）.

e.target 代表的是，实际触发了点击事件的组件。

2. wx:for循环嵌套循环 ，怎样防止 内部循环的item与index覆盖外部

<view wx:for="{{selectAttrData}}" wx:key="{{index}}" >
<block wx:for="{{item.value}}" wx:for-item="twodata" wx:for-index="i" wx:key="{{i}}">
<text>{{twodata}}</text>
</block>
</view>

3. 如何改变数组中某项的值

data中：
数组：
selectedAttr:[ {
detail:"",
date:"",
location:"",
priority:"",
remark:""
}
]
// 对象
obj:{
a:1,
b:2
}
method:
change(e){
var me = this;
// 改变数组
var d = 'selectedAttr[' + index + ']["remark"]';// `selectedAttr[${index}].remark`;
me.setData({
[d]: e.currentTarget.dataset.index
});
// 改变对象
me.setData({
['obj.a']: 3
})
}

4. wx.showToast的icon只提供success和loading。

5.弹框：wx.showActionSheet (https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowactionsheetobject)

wx.showActionSheet({
itemList: ['列1', '列2', '列3'],//显示的列表项
success: function (res) {//res.tapIndex点击的列表项
console.log(res.tapIndex)
},
fail: function (res) { },
complete: function (res) { }
})

6.弹框： wx.showModal(https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowactionsheetobject)

wx.showModal({
title: '删除',
content: '确定要删除？',
showCancel: true,//是否显示取消按钮
cancelText: "否",//默认是“取消”
cancelColor: 'pink',//取消文字的颜色
confirmText: "是",//默认是“确定”
confirmColor: 'pink',//确定文字的颜色
success: function (res) {
if (res.cancel) {
//点击取消,默认隐藏弹框
} else {
//点击确定
console.log("执行删除操作")
}
},
fail: function (res) { },
complete: function (res) { },
})

7.弹窗： wx.showToast（wx.showToast(Object object) | 微信开放文档）

wx.showToast({
title: '成功',//提示文字
duration: 2000,//显示时长，最大10000毫秒
mask: true,//是否显示透明蒙层，防止触摸穿透，默认：false
icon: 'success',
success: function (res) {
console.log("--",res)
},//接口调用成功
fail: function () { },
//接口调用失败的回调函数
complete: function () { } //接口调用结束的回调函数
})

8. 弹框loading： wx.showLoading(https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowactionsheetobject)

wx.showLoading({
title: '加载中...',
mask:true
})
wx.request({
url: '',
success:function(){
wx.hideLoading()
}
})

9. 获取unionid

每个用户对每个公众号或小程序的OpenID是唯一的。对于不同公众号或小程序，同一用户的openid不同。如果开发者有在多个公众号，或在公众号、小程序之间统一用户帐号的需求，根据微信公众平台的设计，可以通过UnionID打通公众号和小程序的帐号身份体系，前提是公众号和小程序同时绑定到同一个微信开放平台帐号下。在微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来满足上述需求。

获取unionid流程：

1. 注册微信开放平台（地址：open.weixin.qq.com）

2. 绑定微信公众号（注：微信开放平台帐号必须完成开发者资质认证才可以绑定）

3. （1）公众号获取方式（get方式）

网址：微信公众平台

调用接口：https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回的数据：

{
"subscribe": 1,
"openid": "xxxxxxx",
"nickname": "Band",
"sex": 1,
"language": "zh_CN",
"city": "xx",
"province": "xx",
"country": "xx",
"headimgurl":"xxxxxx",
"subscribe_time": 1382694957,
"unionid": " xxxxx"
"remark": "",
"groupid": 0,
"tagid_list":[128,2],
"subscribe_scene": "ADD_SCENE_QR_CODE",
"qr_scene": 98765,
"qr_scene_str": ""
}

具体参数说明详见 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839

（1）小程序获取方式

20180511微信小程序正式关闭原先getUserInfo的逻辑，不再允许自动弹出授权框。

示例代码：

Page({
data:{
},
onLoad: function (options) {
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
console.log("-------",res)
}
})
}
}
})
}
})

获取到的信息：

{
encryptedData: "xxxx",
errMsg:"getUserInfo:ok",
Iv:"8kXcup7GS76c/0CjMUluzw==",
rawData："{略}"，
signature: "xxxxxxx",
userInfo:{xx}
}

encryptedData是加密数据，详情说明：

https://developers.weixin.qq.com/miniprogram/dev/api/signature.html#wxchecksessionobject，

包含了openid、unionid等。需要进行解密处理，根据不同的编程预言，微信官方提供了示例代码包（在上述链接中）。

解密后即可获得小程序用户的unionid。

10.小程序缓存个人头像

 开发小程序项目，有时候要对个人信息的头像信息进行缓存。

页面头像结构（这里需要考虑如果没有头像时，该怎么显示。我使用的是男生使用50%圆角的蓝色块，女生使用50%圆角的粉色块。在蓝、粉块居中显示用户名称的第一个字）

<view class="img-container">
<image wx:if="{{hidden}}" class="head-img" src="{{photoPath}}"></image>
</view>

1. 首先从接口获取头像信息，使用wx.downloadFile下载文件资源到本地，使用wx.saveFile保存文件到本地

wx.downloadFile({
url: '', // 网络返回的图片地址
fail:function(err){
console.log(err)
},
success: function (res) {
// console.log(res.tempFilePath, "下载路径");
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (res) {
// console.log(res.savedFilePath,"保存路径");
wx.setStorageSync("photoPath", res.savedFilePath)
}
})
}
})

2. 再次进入个人中心时，需要判断本地是否有缓存在，如果有则先加载缓存的头像，再去请求接口。 

if (wx.getStorageSync("photoPath")){
wx.getImageInfo({
src: wx.getStorageSync("photoPath"),
success: function (res) {
me.setData({
photoPath: res.path
})
}
})
}

11.发送小程序模板消息

 小程序发送模板消息，首先要去官网获取你的小程序id、小程序秘钥，以及消息模板的配置。登录微信公众平台

1. 获取appid，secret信息

2. 添加模板，获取模板id

 3.获取code

wx.login({
success: (data) => {
this.data.code = data.code;
console.log(this.data.code,"---------getCode---------", data)
}
})

4.获取openid

注意：需要将api.weixin.qq.com的域名添加进白名单，否则控制台会有报错提示。

 wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
grant_type: "authorization_code",
appid: "",
js_code: this.data.code,
// 上一步获取到的code
secret: ""
},
success: (data) => {
this.data.openid = data.data.openid;
console.log(this.data.openid,"---------getOpenid---------", data)
}
})

 5. 获取token

wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token',
data: {
grant_type: "client_credential",
appid: "",
secret: ""
},
success: (data)=>{
this.data.token = data.data.access_token;
console.log(this.data.token,"--------getToken----------", data)
}
})

6. 发送消息模板

wxml文件结构：

<form bindsubmit="formSubmit" bindreset="formReset" report-submit="true" >
<view class="btn-area">
<button
formType="submit">testSubmit</button>
</view>
</form>

发送模板的js：

formSubmit: function (e) {
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + this.data.token,
// 上面获取的token
method: "POST",
data: {
touser: this.data.openid, // 上面获取的openid
template_id: "", // 模板id，上面第二步获取
page: "index",
form_id: e.detail.formId, // 这里可能会报the formId is a mock one，这是因为需要在手机上进行测试
data: {
"keyword1": {
"value": "配电监测"
},
"keyword2": {
"value": "报警"
},
"keyword3": {
"value": "2018-07-13"
},
"keyword4": {
"value": "广州市天河区天河路208号"
}
},
emphasis_keyword: "测试通知"
},
success: (data) => {
console.log(e, "--------send----------", data)
},
fail: function (err) {
console.log('request fail ', err);
},
complete: function (res) {
console.log("request completed!");
}
})
}

12.微信小程序获取位置信息

微信小程序获取位置信息:

wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})

根据官网说明，type有两种。默认为 wgs84 返回 GPS 坐标；gcj02 返回国测局坐标（也就是火星坐标）。采用百度地图进行位置解析，返回的位置信息，这两种都不太准确。

百度地图地址解析的具体过程参考：微信小程序JavaScript API - 逆地址解析 | 百度地图API SDK

有些网友分析是产品的问题，换成腾讯地图进行地址解析，具体过程参考：微信小程序JavaScript SDK | 腾讯位置服务。返回的结果比较准确

坐标系：

国测局坐标（火星坐标，GCJ02）：
搜搜、阿里云、高德、腾讯地图等
百度坐标（BD09）：
百度地图
WGS84坐标系：
国际标准，谷歌国外地图、osm地图等国外的地图

从上面的坐标系知识可以看到，腾讯和百度使用的不是同一套的坐标。如果想使用百度地图，需要进行坐标转换。参考： Coordtransform by wandergis

13.小程序 scroll-view（横向）scroll-into-view无效

最近使用研究微信小程序的scroll-view组件进行横向布局时，在onload时使用scroll-into-view进行定位，实际结果却不是想要的。。以下两种写法对scroll-into-view定位都无效：

（1）在scroll-view标签上直接绑定

<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="date10">
<view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"
wx:key="{{index}}" id="date{{index}}">
<view class="fs-28">{{index}}</view>
</view>
</scroll-view>
Page({
data:{
ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
}
})
css部分：
.power-user-wrap{
width:100%;
white-space: nowrap;
}
.power-user-date{
display:inline-block;
width:125rpx;
}

（2）在scroll-view标签上绑定变量使用setData在onload时进行赋值:

​
<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="{{toview}}">
<view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"
wx:key="{{index}}" id="date{{index}}">
<view class="fs-28">{{index}}</view>
</view>
</scroll-view>
Page({
data:{
ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
},
onLoad:function(){
var me = this;
me.setData({
toview:"date10"
})
}
})
css部分：
.power-user-wrap{
width:100%;
white-space: nowrap;
}
.power-user-date{
display:inline-block;
width:125rpx;
}
​

在官网没有找到相应的说明。通过在网上查找资料，发现scroll-into-view的值需要的动态的改变才能触发。示例：

​
​
<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="{{toview}}">
<view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"
wx:key="{{index}}" id="date{{index}}">
<view class="fs-28">{{index}}</view>
</view>
</scroll-view>
Page({
data:{
ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
},
onLoad:function(){
},
onReady:function(){
var me = this;
me.setData({
toview:"date10"
})
}
})
css部分：
.power-user-wrap{
width:100%;
white-space: nowrap;
}
.power-user-date{
display:inline-block;
width:125rpx;
}
​
​

不知道是使用方法的问题，还是坑。欢迎补充~

最后

以上就是贪玩月亮为你收集整理的小程序常见问题/使用的全部内容，希望文章能够帮你解决小程序常见问题/使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。