微信小程序开发注意事项

RacingK
830 阅读3分钟

  1. 微信小程序和企业微信在登录上有些不同，多测试不同情况，在代码逻辑上多做一些兼容。

  2. 微信开发者工具构建npm之后可能还会碰到无法解析，无法正常显示页面的情况，不要着急不要慌，多构建几遍npm，并且确保ES6转ES5勾选上。多试几遍就OK的。

  3. 问：微信小程序如何跳转h5页面？
    答：新起一个webview的页面，然后在页面里头写<web-view src="{{h5}}"></web-view>,在要跳转的地方写

wx.navigateTo({
  url : `/pages/news/newsDetail/detail?h5=${url}`
});

然后在webview的页面的onReady生命周期函数内通过options获取到参数h5，也就是跳转链接，赋值给web-view的src属性，这样打开页面就可以自动跳转到h5页面了。 目前微信小程序跳转h5页面如果是跟小程序关联过得公众号文章可以直接打开，如果是第三方的域名需要进行业务域名配置（最多支持配置20个域名），然后将校验文件放到域名根目录。

  1. wx.switchTab: url 不支持 queryString，可以尝试使用将参数放入全局变量管理。也就是写入app.js。
  2. 可以把http请求方法封装成函数放在app.js中当成公用方法进行调用。
  3. 在微信小程序里头显示外链图片，需要把一级域名配置到业务域名当中。
  4. 问：如何获取缓存中的数据？ 答：可以在公共方法js里头封装一个获取缓存数据的方法，如下：
getStorage(name, callBack) {
    wx.getStorage({
      key: name,
      success: callBack
    })
  }
  1. 接口请求之前都加loading，为了更好的用户体验。
  2. 错误提示可以用微信小程序原生的提示
wx.showToast({
    title: "此处写错误提示内容",
    icon: 'none',
    duration: 2000
})
  1. 问：页面之间跳转用什么方法？
    答：
wx.navigateTo({
  url: 'pageUrl'
})
  1. 问：拨打电话？
    答：
wx.makePhoneCall({
  phoneNumber: "123456789" // 仅为示例，并非真实的电话号码
})
  1. 微信小程序的原生input、textarea等z-index的层级是最高的，如果用其它组件有可能会有文字穿透现象，此时应该使用原生组件，这样后来者才能对前者有覆盖。第二种方法就是做判断，当弹框显示的时候将穿透的部分用不会穿透的组件进行替换。
  2. 问：微信小程序如何改变data中对象的属性值？
    答：
    第一种：
data:{
    a: {
        b: 0
    }
}
let a = 'a.b'
this.setData({
    [a]: '1'
})

第二种：只改data中数组中的一个对象的值可以直接写

data:{
    arr: [
        {
            name: 0
        },
        {
            name: 0
        }
    ]
}
this.setData({
    'arr[1].name': '1'
})

第三种：如果是动态索引

 data:{  
    todos:[{id:0,text:'abc',test:false}]  
  },  
  change(e){  
    var index = e.currentTarget.dataset.id;  
    var test='todos['+index+'].test';  
    this.setData({  
       [test]:true  
    })  
  }
  1. 问：点击地址导航？ 答：
getLocation:function(){
    wx.getLocation({
      type: 'wgs84', 
      success: function (res) {
        wx.openLocation({// 使用微信内置地图查看位置。
          latitude: xxxx,//要去的纬度-地址
          longitude: xxxx,//要去的经度-地址
          name: "xxxx",
          address: 'xxxx'
        })
      }
    })
  }
  1. wx.uploadFile里头获取文件列表有问题，要先在uploadFile之前把fileList先存起来然后操作自定义变量然后给fileList重新赋值。
  2. 问：如何对data中的数组进行删除操作？
    答：
// 删除按钮事件
delete(e) {
    //取出要删除数据的索引
    const {index} = e.currentTarget.dataset
    let arrObj = this.data.arrObj;
    arrObj.splice(index, 1);
    this.setData({
      arrObj
    })
}

  1. 问：微信小程序中如何退出当前小程序？
    答：<navigator target="miniProgram" open-type="exit">点击退出小程序</navigator>
    备注：退出小程序，target="miniProgram"时生效

  2. 问：组件如何传参？
    答：

avatar
文章
阅读
粉丝