【小程序】开发需要注意的地方（二）

2019-03-04 本文已影响37人空城皆是旧梦

16. 小程序this.setData is not a function

现象：如果出现this.setData is not a function 这个错误，这个就是微信小程序中的this的指向问题，比如在发送请求成功之后的this指向。

解决方法：

const that = this;然后使用that.setData
使用ES6的箭头函数

17.使用data-xx传值

小程序会使用data-xx自定义属性，读取的时候event.currentTarget.dataset就可以获取设置的属性值，常用于循环渲染

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="viewTap"> Click me</view>

  viewTap: function(event) {
    console.log(event.currentTarget.dataset.alphaBeta) // 转化为驼峰写法
    console.log(event.currentTarget.dataset.alphabeta) // 所有的大写转化成小写
  }

注意写法

18. 小程序拨打电话报错

img

解决方法：小程序调用拨打电话参数 phoneNumber必须是字符串格式

calling: function (event) {
  wx.makePhoneCall({
     phoneNumber: event.currentTarget.dataset.tel + ''
  })
}

19. block 标签

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（如wx:for 或 wx:if）。

20. 关键字

关键字绑定常用于组件的一些关键字，像复选框组件一样，checked关键字如果等于true，则代表选中复选框，false则代表不选中复选框，示例代码如下：

<checkbox checked="{{false}}"> </checkbox>

不要直接写checked = "false"，其计算结果是一个字符串，转成boolean类型后代表真值。

21. 网络请求

小程序通过wx.request方法进行https网络请求，网络请求是获取网络数据的基本方法。

wx.request({
  url: 'test.php', // 仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  }
})

注意点：

wx.request方法只支持https请求。
访问URL域名已经在微信小程序后台配置为合法域名，并且不能有端口。
method的value必须为大写（如GET）。
request请求的默认超时时间和最大超时时间都是60s。
request的最大并发数是5。
网络请求的referer是不可以设置的，固定格式为https://servicewechat.com/{appid}/{version}/page-frame.html。关于referer的详细解释

22. getCurrentPages()函数

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
getCurrentPages() 跳转现在小程序支持十层。超过十层之后小程序可能会造成崩溃。

23. getApp()

微信小程序在App()函数里定义的是全局函数和全局数据，因此在页面文件夹的js文件也可以直接使用。比如存在“pages/home/home”这样的页面路径，在App()函数中也定义了全局函数getUserInfo()。则在home.js文件中就可以直接使用App()函数提供的全局函数或数据，代码如下：

//home.js
//获取应用实例
const app = getApp()

Page({
  onLoad: function () {
    const that = this
    // 调用应用实例的方法获取全局数据
    app.getUserInfo({
      success: res => {
        that.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  }
})

注意点：

App()函数必须在app.js中注册，且不能注册多个。
不能在App()内的函数调用getApp()，使用this就可以拿到App实例。
通过getApp()获取实例之后，不要私自调用生命周期函数。

24. 小程序生命周期

小程序生命周期分为两类：应用生命周期和页面生命周期。

应用生命周期包括onLaunch、onShow、onHide、onError、onUnload。

页面生命周期包括onLoad、onShow、onReady、onHide、onUnload。

详细解释

25. 小程序判断用户是否是通过点击别人分享的小卡片进入页面

用户进入小程序的方法有很多种，可以通过好友分享、群聊分享、微信聊天主页面下拉或者发现栏小程序等等多种途径。但如果通过好友分享或者群聊分享打开的可能是某一个小程序页面，不能返回主页面，这时就需要在分享的页面中加入一个返回主页面的按钮，所以需要判断用户进入的渠道。

其解决方法有多种，详细解释

26.小程序与内嵌网页之间的跳转

小程序跳转到内嵌H5页面，需要使用web-view组件，定义该组件的src属性即可。

内嵌H5页面跳转到小程序页面引入微信的jssdk文件，使用wx.miniProgram.redirectTo({url: '/path/to/page'})

详细解释

27. 判断网页是否在小程序环境

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。
代码如下：

// web-view下的页面内
wx.ready(function() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
})

// 或

wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true 
})

28. 小程序与内嵌网页的通信

在web-view中添加bindmessage属性，并绑定一个函数，用于监听网页发来的消息。
在内嵌网页中引入jssdk，然后调用wx.miniProgram.postMessage()来向小程序发送数据。

小程序代码：

<!--webview.wxml-->
<web-view src="{{url}}" bindmessage="postMessage"></web-view>

// webview.js
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      url: options.url
    })
  },
  postMessage(e) {
    // e.detail = { data }，data是多次 postMessage 的参数组成的数组
    this.setData({
      score: e.detail.data[0].score
    })
  }

})

内嵌网页代码：

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript 
wx.miniProgram.postMessage({ data: 'foo' }) 
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

注意：网页向小程序 postMessage时，不是实时的，只有在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

29. 小程序内嵌网页的转发分享

小程序内嵌网页本质是在web-view组件的容器中，当对小程序内嵌网页的转发分享，也是对webview页面的转发分享，所以只需在webview.js中的page()定义onShareAppMessage即可。
代码如下：

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl) // 获取当前<web-view>的URL
    return {
      title: "转发文本标题",
      imageUrl: "转发缩略图途径",
      path: options.webViewUrl
    }
  }
})

30. webview组件中bindload问题

最近开发小程序的时候，遇到了一个奇怪的问题。当我对内嵌网页设置背景音频的时候，当网页加载成功的时候，定义音频。但在真机上测试的时候背景音频定义两次，所以出现了重音的现象。

打印了一下日志，发现bindload定义的方法执行了两次。其原因我也不知。

代码如下：
webview.wxml

<!-- 指向微信公众平台首页的web-view -->
<web-view src="{{url}}" bindload="loadHtml"></web-view>

webview.js

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      url: options.url
    })
  },

  loadHtml() {
    console.log('页面加载完成') // 该方法执行两次
  }
})