Skip to content
On this page

微信小程序常见问题导航

参考文章:

问题:

相关文件类型

  • 页面 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;
    }
    1. 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)打开页面
javascript
wx.navigateTo({
  url: 'test?id=1'
})
  1. wx.redirectTo(OBJECT)先关闭当前页面,再打开指定页面
javascript
wx.redirectTo({
  url: 'test?id=1'
})
  1. wx.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
javascript
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})
  1. wx.reLaunch(OBJECT)关闭所有页面,打开到应用内的某个页面。
javascript
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()方法获取组件实例,就可以直接访问子组件的方法和对象。

支付

请求示例

javascript
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){}
	}
)