微信小程序【开发】自学总结 2

作者: squidbrother | 来源:发表于2021-10-26 17:59 被阅读0次

微信小程序【开发】自学总结 2
微信小程序【开发】自学总结
小程序相关实用文章
微信小程序开发中的bug总结。
微信小程序开发系列六：微信框架API的调用
微信小程序开发教程(基础篇)3-app.js 解析
微信小程序【开发】自学总结 3
东莞市玖速网络科技有限公司，一站式微信运营服务商，专业开发定制小
微信小程序从零开始开发
微信小程序开发知识点总结

减少逻辑判断嵌套，而逐层增加的view标签，可以使用block，来挂载条件判断
如：

<block wx:if="{{ showIt }}">
  <view class="someMes">一些内容文字</view>
</block>

频繁切换显示消失的标签，使用hidden代替wx:if
如:

<block hidden="{{ !showIt }}">
  <view class="someMes">一些内容文字</view>
</block>

关于地图组件上的mark点，如何操作

通过mark点的点击事件bindmarkerFn，在事件处理函数事件对象上可以获取ID，如：e.detail.markerId
markerId 正好与生成mark点数据的 markers 中的id 逐一对应。
通过修改 markers 来实现地图标记点数据的修改，如修改标记点图片iconPath
通过修改callout.display来实现，标记点标题名的显示与消失

<map
      id="myMap"
      class="wxMap"
      latitude="{{mapDatas.tabLists[mapDatas.tabIndex].wxMapDataList[mapDatas.sonindex].latitude}}"
      longitude="{{mapDatas.tabLists[mapDatas.tabIndex].wxMapDataList[mapDatas.sonindex].longitude}}"
      markers="{{mapDatas.tabLists[mapDatas.tabIndex].wxMapDataList}}"
      show-location
      show-compass
      show-scale
      scale="17.5"
      bindmarkertap="bindmarkerFn"
></map>

地图mark点拉伸缩放地图时候，会叠加，通过点聚合功能来优化mark点的呈现

配置地图组件点聚合

_that.mapCtx = wx.createMapContext('myMap');
//地图-点聚合初始化 - 基础库 2.13.0 开始支持
if(app.compareVersion(version,'2.13.0')){
  _that.mapCtx.initMarkerCluster({
    //启用默认的聚合样式
    'enableDefaultStyle': true,
    'zoomOnClick': true,
    'gridSize': 60,
    success:function(res){
      console.log(res);
    },
    fail:function(err){
      console.log(err);
    },
    complete:function(res){
      console.log('complete');
    }
  });
}else{
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用地图点聚合，请升级到最新微信版本后重试。'
  });
};

配置地图markers数据wxMapDataList时候，可以设置joinCluster: true，允许标记点参与点聚合功能

_wxMapDataList.push({
      id: item.Id,
      //mark点是否参与点聚合
      joinCluster: true,
      latitude: Number(item.Latitude),
      longitude: Number(item.Longitude),
      name: item.Name,
      width: localMarkLayout.w,
      height: localMarkLayout.h,
      iconPath: localMarkIco,
      callout:{
            content: item.Name,
            color: '#ffffff',
            fontSize:'12',
            borderWidth: 0,
            borderColor:'',
            bgColor: '#FC4303',
            display: index==Number(_mapDatas.sonindex)?'ALWAYS':'',
            textAlign: 'center',
            borderRadius:localMarkLayout.r,
            padding:localMarkLayout.p,
            anchorY:92
      }
});

通过二维码访问特定的小程序中的页面流程 - [生成二维码]
POST 方式 - 请求接口地址：
https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN
其中传递参数中 access_token，可通过下面方式获取
GET 方式 - 请求接口地址：
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
注：

通过该接口生成的小程序码，永久有效，有数量限制
同样获取二维码，有数量限制的https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN方式官方不建议使用
可配置二维码颜色，宽度，底色是否透明等
请求正确，返回的图片 Buffer

小程序开发工具，调试上面服务器端生成的二维码
打开开发者工具 - 选择顶部编译下拉框(默认普通编译) - 通过二维码编译 - 选择二维码图片即可
判断小程序的访问来源
通过使用自定义头部导航，在二级页面以上，需要提供一个返回主页按钮，而非返回上一级
方式一，通过分享链接带参数，如 fromshare，如果进入小程序有这个参数，则认定为来自分享，而非小程序内部跳转
方式二，通过小程序的场景值 scene
app.js中

onLaunch(option){
  console.log(option.scene);

  //是否来自分享
  if(option.scene==1007 || option.scene==1008 || (option.query && option.query.fromshare=='1')){
    _that.globalData.formShare = true;
  };
};

场景值列表:

*   1001：发现栏小程序主入口，「最近使用」列表（基础库2.2.4版本起包含「我的小程序」列表）
*   1005：微信首页顶部搜索框的搜索结果页
*   1006：发现栏小程序主入口搜索框的搜索结果页
*   1007：单人聊天会话中的小程序消息卡片
*   1008：群聊会话中的小程序消息卡片
*   1011：扫描二维码
*   1012：长按图片识别二维码
*   1013：扫描手机相册中选取的二维码
*   1014：小程序模板消息
*   1017：前往小程序体验版的入口页
*   1019：微信钱包（微信客户端7.0.0版本改为支付入口）
*   1020：公众号 profile 页相关小程序列表
*   1023：安卓系统桌面图标
*   1024：小程序 profile 页
*   1025：扫描一维码
*   1026：发现栏小程序主入口，「附近的小程序」列表
*   1027：微信首页顶部搜索框搜索结果页「使用过的小程序」列表
*   1028：我的卡包
*   1029：小程序中的卡券详情页
*   1030：自动化测试下打开小程序
*   1031：长按图片识别一维码
*   1032：扫描手机相册中选取的一维码
*   1034：微信支付完成页
*   1035：公众号自定义菜单
*   1036：App 分享消息卡片
*   1037：小程序打开小程序
*   1038：从另一个小程序返回
*   1039：摇电视
*   1042：添加好友搜索框的搜索结果页
*   1043：公众号模板消息
*   1044：带 shareTicket 的小程序消息卡片
*   1045：朋友圈广告
*   1046：朋友圈广告详情页
*   1047：扫描小程序码
*   1048：长按图片识别小程序码
*   1049：扫描手机相册中选取的小程序码
*   1052：卡券的适用门店列表
*   1053：搜一搜的结果页
*   1056：聊天顶部音乐播放器右上角菜单
*   1057：钱包中的银行卡详情页
*   1058：公众号文章
*   1059：体验版小程序绑定邀请页
*   1064：微信首页连Wi-Fi状态栏
*   1067：公众号文章广告
*   1069：移动应用
*   1071：钱包中的银行卡列表页
*   1072：二维码收款页面
*   1073：客服消息列表下发的小程序消息卡片
*   1074：公众号会话下发的小程序消息卡片
*   1077：摇周边
*   1078：微信连Wi-Fi成功提示页
*   1079：微信游戏中心
*   1081：客服消息下发的文字链
*   1082：公众号会话下发的文字链
*   1084：朋友圈广告原生页
*   1089：微信聊天主界面下拉，「最近使用」栏（基础库2.2.4版本起包含「我的小程序」栏）
*   1090：长按小程序右上角菜单唤出最近使用历史
*   1091：公众号文章商品卡片
*   1092：城市服务入口
*   1095：小程序广告组件
*   1096：聊天记录
*   1097：微信支付签约页
*   1099：页面内嵌插件
*   1102：公众号 profile 页服务预览
*   1124：扫“一物一码”打开小程序
*   1125：长按图片识别“一物一码”
*   1126：扫描手机相册中选取的“一物一码”
*   1129：微信爬虫访问

关于分页优化补充简书地址
说明: 一个函数解决初始化调用以及在scroll-view触底时加载分页时候调用

//-- js代码
data:{
'productDataHot':{
  'loaded': false,
  'isLoading': false, 
  'noMore': false,
  'totalcount':0,
  'pageindex': 0,
  'list': []
}
},
//获取我的礼物兑换
getExchangeFn(){
  var _that = this;
  var _userInfo = _that.data.userInfo;
  var _exchangeData = _that.data.exchangeData;

  //初次加载
  if(!_exchangeData.loaded){
    _that.setData({
      ["exchangeData.pageindex"]:1,
      ['exchangeData.isLoading']: true
    });
  }else{
    //有无更多数据，有则继续+1
    if(_exchangeData.list.length != _exchangeData.totalcount){
      var _tempIndex = _exchangeData.pageindex+1;
      _that.setData({
        ["exchangeData.pageindex"]:_tempIndex,
        ['exchangeData.isLoading']: true
      });
    }else{
      return false;
    };
  };

  //未添加签名
  var _postMes = {
    "userid": _userInfo.UserId,
    "channel": app.globalData.channel,
    "pageindex": _exchangeData.pageindex,
    "pagesize": _prePage,
    "timestamp": app.getTimestamp()
  };

  var _md5Str = "timestamp=" +_postMes['timestamp'] + "&userid=" +_postMes['userid'] + "&key=" + app.globalData.md5Key;
  _postMes['sign'] = app.md5Fn(_md5Str);

  //添加签名后
  var _lastPostMes = _postMes;
  var _tempLink = app.globalData.baseurl+'api/question/orderlist';

  app.ajaxFn( _tempLink, _lastPostMes, "POST", function(res){
      if(res.statusCode == 200){
        if(res.data.errorcode == 0){
          //处理数据时间格式
          res.data.list.forEach(function(item){
            item.AddTime = app.formTimeStr(item.AddTime);
          });
          var _resList = _exchangeData.list.concat(res.data.list);
          var _nomore = _resList.length==res.data.totalcount?true:false;
          _that.setData({
            ['exchangeData.loaded']: true,
            ['exchangeData.noMore']: _nomore,
            ['exchangeData.totalcount']: res.data.totalcount,
            ['exchangeData.list']: _resList
          });
          setTimeout(function(){
            _that.setData({
              ['exchangeData.isLoading']: false
            })
          },800);
        }else{
          app.showPop((res.data.message?res.data.message:'兑换加载失败'),1500,'none');
          _that.setData({
            ['exchangeData.isLoading']: false
          });
        };
      };
    }, function(err){
      app.showPop('兑换加载错误',1500,'none');
      _that.setData({
        ['exchangeData.isLoading']: false
      });
  });
}

关于小程序内自定义组件数据更新问题，且数据状态由挂载组件的外部环境提供时候。

当一个自定义组件上，存在多个异步数据状态要一次性更新时候？
可以将所有异步数据加载完毕后，再调用自定义组件，一次完成状态变化
当一个组件内部数据由外部传递的属性来决定时候，如何外部状态更新组件内数据，可以借助observers
方法1：
※ observers - 组件数据字段监听器，用于监听 properties 和 data 的变化 - (从小程序基础库版本 2.6.1 开始支持)

properties: {
  userCollect: {
    type: Array,
    value: []
  }
},
data: {
  'isCollected': false
},
lifetimes: { },
observers: {
  'userCollect': function(newVal){
     //更新后属性
     console.log(newVal);
    //修改自定义组件内部数据
    if(xxx){
        this.setData({
          'isCollected':true
        });
    }else{
      this.setData({
          'isCollected':false
        });
    };
  }
}

方法2
将组件内通过外部传递属性来判断的内部数据，改变为外部数据传递进来，将所有逻辑放到组件外部处理
方法3
通过wx:if方式移除组件，在添加组件，刷新其内部各状态

如果组件外部数据对于组件内更新有各自更新问题，将数据由父级管理，移动至自定义组件内部去管理，去请求和修改

小程序中如有使用下列API，就需要在用户隐私协议内描述具体使用场景
特别注意：如果脚本库里有涉及列表内的API，即便没有引入小程序内使用，也算涉及API了，需要描述使用场景

处理的信息	接口或组件
收集你的微信昵称、头像	wx.getUserInfo、wx.getUserProfile、<button open-type="userInfo">
收集你的位置信息	wx.authorize({scope:'scope.userLocation'})、wx.authorize({scope: 'scope.userLocationBackground'})、wx.getLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground、wx.choosePoi、wx.chooseLocation
收集你的地址	wx.chooseAddress
收集你的发票信息	wx.chooseInvoiceTitle、wx.chooseInvoice
收集你的微信运动步数	wx.authorize({scope: 'scope.werun'})、wx.getWeRunData
收集你的手机号	<button open-type="getPhoneNumber">
收集你的车牌号	wx.chooseLicensePlate
收集你选中的照片或视频信息	wx.chooseImage、wx.chooseMedia、wx.chooseVideo
收集你选中的文件	wx.chooseMessageFile
访问你的麦克风	wx.authorize({scope: 'scope.record'})、wx.startRecord、RecorderManager.start、<live-pusher>、wx.joinVoIPChat
访问你的摄像头	wx.authorize({scope: 'scope.camera'})、wx.createVKSession、<camera>、<live-pusher>、<voip-room>
访问你的蓝牙	wx.openBluetoothAdapter、wx.createBLEPeripheralServer
使用你的相册（仅写入）权限	wx.authorize({scope: 'scope.writePhotosAlbum'})、wx.saveImageToPhotosAlbum、wx.saveVideoToPhotosAlbum
使用你的通讯录（仅写入）权限	wx.addPhoneContact
使用你的日历（仅写入）权限	wx.addPhoneRepeatCalendar、wx.addPhoneCalendar

占坑....

微信小程序【开发】自学总结 2
减少逻辑判断嵌套，而逐层增加的view标签，可以使用block，来挂载条件判断如：频繁切换显示消失的标签，使用h...
微信小程序【开发】自学总结
抖音小程序与微信小程序差异 API方法使用 tt -> wx 获取用户信息的方式通过button按钮，设置属性 ...
小程序相关实用文章
1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...
微信小程序开发中的bug总结。
微信小程序开发中的bug总结。
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一：微信小程序的申请和开发环境的搭建微信小程序开发系列二：微信小程序的...
微信小程序开发教程(基础篇)3-app.js 解析
微信小程序开发教程(基础篇)1-初识微信小程序微信小程序开发教程(基础篇)2-微信小程序结构概览上一篇教程中写道...
微信小程序【开发】自学总结 3
安装第三方插件 - (weapp) 在小程序根路径下，初始化npm - (配置使用默认) 安装插件包修改app....
东莞市玖速网络科技有限公司，一站式微信运营服务商，专业开发定制小
1、微信运营：微信平台开发；微信平台运营。 2、小程序制作开发：图片拍摄处理，微官网、微商城，小程序运营托管，产品...
微信小程序从零开始开发
1、微信小程序开发教程2、小程序官方文档-小程序版
微信小程序开发知识点总结
微信小程序自我小总结微信小程序是一个介于原生app和H5之间的一个东东。不过微信小程序是依赖微信开发平台的，甚至...