小程序常见问题/使用

IT小打杂

于 2021-12-13 14:50:15 发布

阅读量771

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/nana525484608/article/details/103067028

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

参数	是否必填	说明
access_token	是	凭证
openid	是	普通用户的标识，对当前公众号唯一
lang	否	国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

返回的数据：

{
    "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;
}

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

IT小打杂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小程序常见问题/使用

currentTarget.datasett和 target.datatset区别e.currentTarget 代表的是，注册了监听点击事件的组件。在本例中，就是外层的View（包含了两个TextView）.e.target 代表的是，实际触发了点击事件的组件。2. wx:for循环嵌套循环，怎样防止内部循环的item与index覆盖外部<view wx:for...
复制链接

扫一扫