小程序开发技术总结（持续更新）

20200312 小程序获取用户当前ip地址

https://pv.sohu.com/cityjson?ie=utf-8
http://ip-api.com/json    

20200215 小程序设置锚点

  
  为您推荐
  

20200215 小程序遍历对象属性

{
    {key}}：{
    {item}}

20200212 自定义导航栏内容高度和胶囊高度一致

标题栏高度+胶囊距顶部高度

navHeight: getApp().statusBarHeight + wx.getMenuButtonBoundingClientRect().top+16

20200122 云函数安装依赖wx-server-sdk

cnpm install --save wx-server-sdk@latest

20200115 组件如何调用页面内的方法

// 首先得在页面内 将需要调用的方法 暴露出来 如下面的 bind:run="getList"

// 然后再在组件内直接取这个run 即可调用页面内的getList方法
this.triggerEvent("run",params)
// 参考链接：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

20200114 页面如何调用组件内的方法

// 先在组件内定义id 然后通过id调用方法

this.selectComponent("#specs").getDetail();

20200114 最完美的底部弹框解决方案

  
    
      分享
    
    
      
        分享给好友
      
      
        生成海报
      
    
  


// 关闭分享弹框
closeShare() {
  this.setData({
    isShow: false
  })
},
// 虚拟方法 用于控制点击整个页面弹框关闭 而点击下面内容部分不关闭
catchDialog() {},
// 内部所有点击事件用catchtap

20200114 在组件中如何自定义分享内容

正常的操作可以在onShareAppMessage()中完成，但是onShareAppMessage()只能写在page中 , 在自定义组件中无效，在page中也是只有定义了该函数，右上角才会显示转发按钮。

解决办法：1.将要分享的标题图片和路由以对象的形式传给自定义组件，2.自定义组件拿到后再将其暴露出来，3.然后我们再在使用组件的page的onShareAppMessage()去获取该对象

// 引用分享弹框



// 打开分享弹框
  openShare(e){
    let obj = e.currentTarget.dataset.obj
    this.setData({
      shareDialog:true,
      shareInfo:{
        title: obj.name,
        imageUrl: obj.firstImageItems[0],
        path: 'pages/mine/planDetail??planId=' + obj.id,
      }
    })
  },

// 在组件中 接收shareInfo并暴露出来
分享给好友

// 在原页面 监听分享对象
  onShareAppMessage: function (res) {
    let shareInfo = res.target.dataset.shareinfo;    // 注意这块 你在组件中定义的属性可能包含大写但这边接收统一是全小写的
    return {
      title: shareInfo.title,
      path: shareInfo.path,
      imageUrl: shareInfo.imageUrl
    }
  }

20200113 最完美的小程序轮播图解决方案

  
    
      
    
  


// 代码解析：此方案实现的是最大以正方形显示为基准 也就是高度 最高就是屏幕的宽度  
["https://testimage.chuanghua168.com/images/2019/07/23/201907230744054eij6_324x324.jpg", "https://testimage.chuanghua168.com/images/2019/03/18/201903181135017yvm7_324x324.png", "https://testimage.chuanghua168.com/images/2019/03/19/201903191215003njot_324x324.jpg",]

 

20200111 canvas在自定义组件中不生效

原因解析：createCanvasContext方法有两个参数，在page页面默认传了一个this，而在组件里面需要手动传入。
解决办法：let ctx = wx.createCanvasContext('shareImg',this)    // 后面加个this

20200102 新增编辑成功提示后返回上一页

wx.showToast({
  title: '保存成功',
  duration: 1000,
  success: function () {
    setTimeout(function () {
      wx.navigateBack()
    }, 1000);
  }
});

20191225 button内有多个元素时修改其默认样式

  分享


.footer .left{
  overflow: visible;
  line-height: normal;
  background: transparent;
  padding: 0;
}
.footer button::after {
  border: none;
}

20191223 小程序绘制canvas二次打开不显示的问题

原因剖析：用传统的wx:if去控制canvas的显示与隐藏，当第一次canvas绘制完毕后，后面再次无法绘制，因为该对象已存在，所以就为空也就是不显示。
解决办法：用css样式display属性去控制其显示和隐藏，默认进入页面后只绘制一次，后续只进行它的展示与隐藏。