微信公众号开发

微信小程序基础知识笔记

本文主要是介绍微信小程序基础知识笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

微信小程序笔记

文件构成

全局文件

  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属性即可

// page.wxml
<web-view src="{{url}}"></web-view>

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


传参

函数传参

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

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

跳转传参

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

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

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

未完待续

原文-有道云笔记链接

这篇关于微信小程序基础知识笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!