微信小程序基础知识笔记
微信小程序笔记
文件构成
全局文件
- app.json
小程序全局配置文件,必要,自动生成
- app.js
小程序入口JS文件,一般只需申明全局变量、处理生命周期以及版本升级即可,必要
- app.wxss
小程序全局CSS样式文件,非必要
- app.wxml
小程序全局HTNL文件,非必要
页面文件
[page]为页面自定义名称,可随意,但建议具有语义性的命名
- [page].json
页面配置文件
- [page].js
页面JS文件,一般实现具体的逻辑处理、网络请求等
- [page].wxss
页面CSS样式文件
- [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 }}
...
跳转
内部跳转
- wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(参数必须为字符串)
wx.navigateTo({
url: `/pages/welcome/index?name=${name}`
})
- wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url: `/pages/welcome/index?name=${name}`
})
- wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数
wx.switchTab({
url: '/pages/index/index'
})
- wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
wx.navigateBack({
detal: 1
})
- wx.reLaunch
关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
url: '/pages/index/index'
})
WXML标签,跳转任意页面,可添加属性实现跳转其他小程序
// page.wxml
<navigator url='/pages/index/index'>
// 跳转小程序
<navigator targe="miniProgram" app-id="123456789">
跳转外部小程序
- wx.navigateToMiniProgram
打开另一个小程序
wx.reLaunch({
appId: '12345678',
extraData: {} // 跳转参数
})
详细参数建议阅读 “wx.navigateToMiniProgram|微信开放文档”
- 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
}
未完待续
微信小程序基础知识笔记的更多相关文章
- 微信小程序基础知识
一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...
- 微信小程序基础
前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...
- 微信小程序基础入门
准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...
- 微信小程序内训笔记
2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例, ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
- 微信小程序基础之在微信上显示和体验小程序?
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
- 微信小程序基础之交互操作控件
好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
随机推荐
- 如何给html元素的onclick事件传递参数即如何获取html标签的data
某些非text元素,如a.button等用于触发时间的标签可已将要传的数据放在一个属性中,如data,这个属性必须是不影响样式的,可以使用任意非html定义的名字命名属性,然后将数据传到属性中, &l ...
- 判断Windows系统是32位或64位并执行不同脚本命令
判断Windows系统是32位或64位并执行不同脚本命令 https://www.autoahk.com/?p=16549&preview=true https://www.cnblogs.c ...
- MySQL 创建高性能索引
索引是存储引擎用于快速找到记录的一种数据结构.除了加速查找,索引在其他方面也有一些有用的属性.索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.在数据量较小且负载较 ...
- 53. 最大子序和(剑指 Offer 42)
53. 最大子序和(剑指 Offer 42) 知识点:数组:前缀和:哨兵:动态规划:贪心:分治: 题目描述 输入一个整型数组,数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值. 要求 ...
- Linux 内核的代码仓库太不一样了,光克隆都让我挠头,克隆后居然还丢文件,你肯定也会遇到!!!
一个肯定能让你节省几个小时的小知识 大家好,我是 小猿来也,一个人称撸(划)码(水)小能手的程序猿. 最近一段时间,每次经过旁边大佬工位,总是发现他在快速的切屏,不知道在搞什么?难道他发现了快乐星球? ...
- 安装MySQL详细说明
安装MySQL详细说明 下载后得到zip压缩包 解压到自己的安装目录 添加环境变量 我的电脑->属性->高级->环境变量 选择PATH,在其后面添加:你的mysql安装文件下面的bi ...
- rancher清理主机脚本
#!/bin/bash #From:rancher #date:2019-10-18 #admin:jarno # 停止服务 systemctl disable kubelet.service sys ...
- python中两种拷贝目录方法的比较
首先是用python自己的api: shutil.copytree('./build/tested/doc', './build/tested/build/doc') 优点是改变平台时不需要修改代码, ...
- git命令行or图形化界面?看这篇操作就够了
我们在自己的私人分支开发好各自的模块后,就要合并到master,这个时候在idea里边先切换到master,然后update一下获取最新更新,解决一下冲突,最后再合并自己的私人分支,add,commi ...
- CVPR2021 | 重新思考BatchNorm中的Batch
前言 公众号在前面发过三篇分别对BatchNorm解读.分析和总结的文章(文章链接在文末),阅读过这三篇文章的读者对BatchNorm和归一化方法应该已经有了较深的认识和理解.在本文将介绍一篇关于 ...