微信小程序笔记

微信小程序笔记

文件构成

全局文件

  1. app.json

小程序全局配置文件,必要,自动生成

  1. app.js

小程序入口JS文件,一般只需申明全局变量、处理生命周期以及版本升级即可,必要

  1. app.wxss

小程序全局CSS样式文件,非必要

  1. app.wxml

小程序全局HTNL文件,非必要

页面文件

[page]为页面自定义名称,可随意,但建议具有语义性的命名

  1. [page].json

页面配置文件

  1. [page].js

页面JS文件,一般实现具体的逻辑处理、网络请求等

  1. [page].wxss

页面CSS样式文件

  1. [page].wxml

页面HTNL文件


基本原理

小程序分为两个部分 webview 和 appService 。其中webview主要用来展现UI,appService有来处理业务逻辑、数据及接口调用。

App()是小程序唯一实例,页面中可通过getApp()获取该实例,而Page()是页面实例。

// app.js
globalData: {
    name: 'zzz'
}
// page.js
const name = getApp().globalData.name

生命周期

onLoad——页面加载,调一次,可在参数内获取跳转URL传递的参数

onShow——页面显示,每次打开/切入前台时页面都调用

onReady——初次渲染完成,调一次

onHide——页面隐藏/切入后台,当navigateTo或底部tab切换时调用

onUnload——页面卸载,当redirectTo或navigateBack时调用

graph LR
onLoad页面加载-->onShow页面显示
onShow页面显示-->onReady页面渲染
onReady页面渲染-->onHide页面隐藏/后台
onHide页面隐藏/后台-->onUnload页面卸载

基础语法

数据更新

小程序内数据更新必须使用setData函数异步更新

this.setData({
    key: value
}, [function])
// 参数二为可选参数,接受一个函数作为异步更新数据的回调

数据获取

数据获取直接使用对象链即可

const name = this.data.name

数据绑定

插值表达式

{{ name }}

数据遍历

wx:for

wx:for="{{ array }}" wx:key="id"
// 默认:当前项item,索引index
{{ item.id }} - {{ index }}

// 可选参数
wx:for-item="myItem" wx:for-index="myIndex"
{{ myItem.id }} - {{ myIndex }}

条件

wx:if

wx:else

const isShow = true

wx:if={{ false }}
wx:else={{ isShow }}
...

跳转

内部跳转

  1. wx.navigateTo

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(参数必须为字符串)

wx.navigateTo({
    url: `/pages/welcome/index?name=${name}`
})
  1. wx.redirectTo

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.redirectTo({
    url: `/pages/welcome/index?name=${name}`
})
  1. wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数

wx.switchTab({
    url: '/pages/index/index'
})
  1. wx.navigateBack

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层

wx.navigateBack({
    detal: 1
})
  1. wx.reLaunch

关闭所有页面,打开到应用内的某个页面

wx.reLaunch({
    url: '/pages/index/index'
})

WXML标签,跳转任意页面,可添加属性实现跳转其他小程序

// page.wxml
<navigator url='/pages/index/index'>
// 跳转小程序
<navigator targe="miniProgram" app-id="123456789">

详细参数建议阅读 “navigator|微信开放文档”

跳转外部小程序

  1. wx.navigateToMiniProgram

打开另一个小程序

wx.reLaunch({
    appId: '12345678',
    extraData: {} // 跳转参数
})

详细参数建议阅读 “wx.navigateToMiniProgram|微信开放文档”

  1. wx.navigateBackMiniProgram

返回上一个小程序

wx.reLaunch({
    extraData: {} // 返回参数
})

跳转内嵌H5

web-view

承载网页的容器,每个页面只能有一个 web-view,会自动铺满整个页面,并覆盖其他组件。

跳转至web-view页面并赋值src属性即可

// webview.wxml
<web-view src="{{url}}"></web-view>
// webview.js
page({
    onLoad() {
        this.setData({ src: 'http://xxxxx' })
    }
})

详细内容建议阅读 “web-view|微信开放文档”(重要)


通信

函数传参

小程序函数传递参数语法区别于Vue,不能直接使用bindtap="handle(item)",需要使用 data- 属性绑定参数

注意:参数名不支持大写,不支持驼峰命名,例如 userName --转换--> username

// page.wxml
<view bindtap="handle" data-item="item"> // 1
<view bindtap="handle" data-userName="zzz"> // 2
// 多参数
<view bindtap="handle" data-item="{{ {item1, item2} }}">
<view bindtap="handle" data-item="{{ [item1, item2] }}">
// page.js
handle(e) {
    const item = e.currentTarget.dataset.item // 1: item
    const name = e.currentTarget.dataset.username // 2: zzz
}

跳转传参

跳转页面path上直接拼接参数即可

wx.navigateTo({
    url: '/pages/welcome/index?name=zzz'
})

// welcom/index.js
onLoad(options) {
    const name = options.name   // zzz
}

与内嵌H5通信

小程序 --> H5

与跳转传参一致,url后拼接参数即可

// webview.js
page({
    onLoad() {
        this.setData({ src: 'http://xxxxx.com?data=xxx' })
    }
})
H5 --> 小程序

需要先引入wxsdk

// 1.npm下载sdk,weixin-js-sdk是非官方npm包,官方并未维护微信sdk的npm包
npm i weixin-js-sdk
import wxsdk from 'weixin-js-sdk'

// 2.直接下载官方jssdk到本地
// 需要做些处理,将jssdk文件内第一个this改为window,然后在文件最后加上 export default wxsdk
import wxsdk from './lib/jweixin-1.3.2'

1.与跳转传参一致,url后拼接参数即可

wxsdk.miniProgram.navigateTo({
    url: '/pages/index/index?data=111'
})

2.postMessage

// 官方api,但局限性大,只能在特定情况(小程序后退、组件销毁、分享)才会触发
wxsdk.miniProgram.navigateBack()
wxsdk.miniProgram.postMessage({
    data: {
        // 参数写在data里
        key: value
    }
})

未完待续...

posted on 2021-09-08 15:34  吴知木  阅读(55)  评论(0编辑  收藏  举报

导航