微信小程序常见问题 #

导航 #

• 相关文件类型
• 封装微信小程序的数据请求
• 参数传值的方法
• 页面跳转
• 提升小程序速度的方法
• 小程序原理与优劣势
• 实现下拉刷新
• 小程序的生命周期
• bindtap/catchtap
• tab
• 授权登录
• 组件
• 支付

参考文章： #

• 微信小程序-知识点总结
• 微信小程序有哪些参数传值的方法？
• 微信小程序面试
• 微信小程序必知面试题
• 微信小程序面试
• 微信小程序页面跳转的几种方式
• 前端都应该掌握的微信小程序和公众号的开发知识汇总

问题： #

相关文件类型 #

• 页面 WXML，样式 WXSS，逻辑 js
• 项目配置文件 project.config.json:setting 配置 es6,postcss,minified,另外配置 appid，项目名等
• app.json：配置文件入口，整个小程序的全局配置。包括页面注册(路由)，网络设置，window 选项，配置导航条样式，配置默认标题、底部 tabBar。
• app.js:处理小程序的生命周期函数、声明全局变量
• app.wxss:全局样式

封装微信小程序的数据请求 #

• 可放在 util 路径下封装请求接口 js，并 export
• 可在 app.js 封装请求数据
• 可在页面中调用 wx.request 请求

参数传值的方法 #

• 用 navigator 标签或 wx.navigateTo（wx.redirectTo 或 wx.reLaunch 或 wx.switchTab 或 wx.navigateBack）

  javascript

  wx.navigateTo({
    url: "../detail/detail?objectId=122342341" + "&?index=12",
  });
  

  html

  <navigator class="detailItem" url="../detail/detail?objectId=122342341"+"&?index=12"></navigator>
  

  onload 接收

  javascript

  onLoad:function(options){
      var objectId=options.objectId;
      var index =options.index;
  }
  

  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
  • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  • wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

• 全局数据存储

  javascript

  //存储到app对象上的方式
  var app = getApp();
  app.globalData.mydata = { a: 1, b: 2 }; //存储数据到app对象上
  

• 页内传值

  1. 设置 id 或 data-xxx 传值
  html

  <view bindtap="getId" id="{{item.id}}" data-index="{{item.index}}"></view>
  

  javascript

  getId:function(event){
  var id =event.currentTarget.dataset.id;
  var index=event.currentTarget.dataset.index;
  }
  

  2. form 表单和 input 输入框
  html

  <form bindsubmit=“formSubmit”>
      <input name="detail" placeholder="收件人的地址"/>
      <input name="username" placeholder="收件人姓名”/>
      <input name="phone" placeholder="收件人手机号”/>
  </form>
  
  formSubmit:function(e){
      var detail =e.detail.value.detail;
      var  name=e.detail.value.username;
      var  phone =e.detail.value.phone;
  }
  

页面跳转 #

1. wx.navigateTo(OBJECT)打开页面

wx.navigateTo({
  url: 'test?id=1'
})

2. wx.redirectTo(OBJECT)先关闭当前页面，再打开指定页面

wx.redirectTo({
  url: 'test?id=1'
})

3. wx.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})

4. wx.reLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面。

wx.reLaunch({
  url: 'test?id=1'
})

提升小程序速度的方法 #

• 减少请求次数
• 多利用已有的微信组件
• data 不存放无用数据

小程序原理与优劣势 #

• 原理

  微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发，与 js、html、css 类似

  但 js 运行在微信浏览器中，而非普通浏览器，因此与 h5 有较多不同之处(限制)，例如 h5 跳转可使用 window.location.href，小程序中使用 wx 封装好的接口，如 navigateTo

  wxss 和 css 也有不同：wxss 的图片引入需使用外链地址，没有 Body，样式可直接使用 import 导入

  小程序架构类似 vue，是数据驱动的，但不同之处是要使用 setData 设置数据，以及模板语法不同

  小程序分为两个部分 webview 和 appService。其中 webview 主要用来展现 UI，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

• 优劣势

  • 优势

    • 有微信即可用
    • 开发成本比 app 低
    • 安卓可添加到桌面
    • 有严格的审核流程

  • 劣势

    • 限制较多。页面大小不能超过 1M。不能打开超过 5 个层级的页面。
    • 样式单一。成型组件样式不可修改。例如：幻灯片、导航。

实现下拉刷新 #

• 首先在 app.json 或者页面的 json 中配置 enablePullDownRefresh 为 true
• 在 Page 中使用 onPullDownRefresh 函数,该函数在下拉刷新时执行
• 在下拉函数执行时发起数据请求，请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新的状态

小程序的生命周期 #

应用：

• onLaunch 监听小程序初始化。
• onShow 监听小程序启动或切前台。
• onHide 监听小程序切后台。
• onError 错误监听函数。
• onPageNotFound 页面不存在监听函数。
• onUnhandledRejection 拒绝事件监听函数。
• onThemeChange 监听系统主题变化

页面：

• onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
• onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
• onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
• onUnload() 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时。

bindtap/catchtap #

bindtap 是不会阻止冒泡事件的，catchtap 是阻值冒泡的

tab #

必须用 wx.switchTab(Object object)，需要跳转的页面必须是在 app.json 中的 tabBar 注册过的，并且路径后不能带参数

授权登录 #

小程序登录

如果后台不需要保存头像，昵称或者拿 unionID。其实不用授权的。通过 wx.login 就能换取到用户在小程序唯一标识 openID。而且如果前端要展示用户昵称头像等，通过 open-data 组件获取用户的一些信息展示

获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取

小程序登录、用户信息相关接口调整说明

组件 #

• 生命周期：

1. ​created - 在组件实例刚刚被创建时执行，（注意此时不能调用 setData )；
2. attached - 在组件实例进入页面节点树时执行；
3. ready - 在组件布局完成后执行
4. ​moved - 在组件实例被移动到节点树另一个位置时执行；
5. detached - 在组件实例被从页面节点树移除时执行；

• 组件间通信：

1. 父组件通过属性传递， 子组件通过 properties 能接收到。
2. 子组件派发事件，通过 this.triggerEvent(‘事件名称’, 要传达的数据, 事件选项);
3. 父组件可以通过 this.selectComponent()方法获取组件实例，就可以直接访问子组件的方法和对象。

支付 #

请求示例

wx.requestPayment
(
	{
		"timeStamp": "1414561699",
		"nonceStr": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
		"package": "prepay_id=wx201410272009395522657a690389285100",
		"signType": "RSA",
		"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==",
		"success":function(res){},
		"fail":function(res){},
		"complete":function(res){}
	}
)