微信小程序学习思维导图

U332689344

2023-05-03

浏览量: 34

微信小程序

学习

计划

微信小程序学习计划

树图思维导图提供《微信小程序学习》在线思维导图免费制作，点击“编辑”按钮，可对《微信小程序学习》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：7c704cf20c28da3474750e7a80cecd54

思维导图大纲

学习小程序第一天

课程内容

小程序概述

定义

特点

应用场景

开发环境搭建

下载安装开发工具

注册开发者账号

创建小程序

选择模板或自定义模板

配置小程序信息

小程序框架介绍

结构

生命周期

组件

课程目标

了解小程序的定义、特点以及应用场景

掌握开发环境的搭建和开发者账号的注册

能够创建一个简单的小程序，并配置相应的信息

熟悉小程序框架的结构和生命周期，并掌握常用组件的使用方法

学习建议

仔细阅读课程内容，理解每个知识点的作用和意义

积极动手实践，尝试创建自己的小程序

定期复习，加深对知识点的理解和记忆

在学习过程中遇到问题及时寻求帮助，加入相关群组或论坛进行交流和讨论

小结

在第一天中，我们要了解微信小程序的概念，以及接下来如何去学习微信小程序开发，为之后的开发打下预防针。

学习微信小程序第二天

改进已有项目

[]添加新功能

[]修改首页样式

[]增加分类页面

[]实现搜索功能

[]优化页面交互

[]增加加载中提示

[]优化页面渲染速度

新建页面

[]创建新页面

[]增加页面跳转功能

[]完成页面设计

API调用

[]学习微信小程序API

[]调用API获取数据

[]处理API返回数据

小结

[]回顾所学内容

[]总结经验教训

[]制定下一步学习计划

学习微信小程序第三天

问题解决

如何实现动态列表？

如何在列表中添加图片？

如何使用模态框？

动态列表

利用组件`<scrollview>`实现

使用`wx:for`循环渲染列表项

为列表项设置`dataindex`属性用于标识当前项

列表添加图片

利用组件`<image>`实现

利用`wx:if`控制是否显示图片

渲染图片时为其添加`mode`属性，控制图片展示方式

使用模态框

利用组件`<modal>`实现

使用`wx:if`控制是否显示模态框

通过设置按钮`bindtap`事件触发显示或隐藏模态框

水果列表

静态布局

添加水果

删除水果

头像和昵称获取

头像获取

属性：open-type="chooseAvatar"

方法：bind:chooseavatar

事件参数获取头像:ev.detail.avatarUrl

昵称获取

属性：type="nickname"

方法：bind:change="getUserNickName"

事件参数获取昵称:ev.detail.value

路由函数

wx.navigateTo

普通跳转

wx.redirectTo

重定向跳转当前所在页面会被替换

wx.switchTab

跳配置了 app.json 里面 tabBar 页面

wx.navigateBack

后退页面

可以带上 delta 属性来决定后退多少页

npm 的使用

跟普通项目一样, 都是安装引入然后使用

第一次使用时, 小程序没有默认的 package.json 需要初始化 npm init -y

小程序对于代码大小控制严格, 需要先构建出可以使用的最小文件再使用, 需要点击工具当中的构建 npm 选项

安装插件

npm i dayjs

npm i miniprogram-computed

js中引入计算属性功能

使用：computed:{}

组件

自定义组件

创建

创建component文件夹

子文件创建文件夹

右击子文件创建Component

导入注册

json app.json 是全局

页面.json 是局部注册

使用

跟vue一样

组件通讯

父传子

父组件用属性传值

子组件接收properties

子组件直接使用数据

子传父

子组件触发

this.triggerEvent('自定义事件名', 传递参数)

父组件监听

bind:子组件自定义的事件名="处理函数"

父组件后续处理函数

用event事件参数里的detail属性来接收子组件的参数

小结

我们学习了如何实现列表的动态生成和遍历，小程序“路由”的配置以及组件的了解和使用。还学习了如何安装npm包后为什么不能直接使用而是要如何去构建npm

学习微信小程序第四天

JavaScript Component({ // // 创建 // created() {}, // // 进入页面节点相当于 mounted // attached() {}, // // 从页面节点消失, 相当于 destroy // dettached() {} // 外层或者是封在 lifetimes 里面都可以, 建议是封在里面 lifetimes: { // 创建 created() { console.log('组件创建'); }, // 进入页面节点相当于 mounted attached() { console.log('组件进入页面'); }, // 从页面节点消失, 相当于 destroy dettached() {} }, methods: { // 组件的方法都写在这 // 跟 app.js / page.js 不一样, 他们是在第一级就行 handleTap() { this.triggerEvent('myClick', 66778) } } })

组件当中的插槽写法

父组件使用子组件时开闭标签之间的内容, 可以再子组件内的 slot 标签渲染

父组件

HTML <child msg="你好世界" bind:myClick="handleMyClick"> <view> 这里是父组件来决定子组件的渲染逻辑!! </view> </child>

子组件

HTML <slot/>

备注拓展: 默认只有一个, 可以通过配置来使得多个slot得到支持

https://flowus.cn/preview/7eb6cef9-a7d4-4bcd-b038-4cfed21a792a

vant ui 组件库使用

下载和配置

Shell npm i @vant/weapp -S --production "style": "v2", { "usingComponents": { "child": "/components/child/child", "van-button": "@vant/weapp/button/index" } } <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>

https://flowus.cn/preview/288a5bfd-83e5-43a7-a58a-9d53d4c41fdd

单元格组件和滑动单元格组件

记得如果样式出不来, 清理缓存和编译刷新

<van-cell-group> <van-cell title="单元格" value="内容" /> <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" /> </van-cell-group>

<van-swipe-cell right-width="{{ 65 }}">  <van-cell-group> <van-cell size="large" title="北京富力家园"> <text class="tags fail">审核失败</text> </van-cell> <van-cell title="房间号" value="1号楼1单元101室" border="{{ false }}" /> <van-cell title="业主" value="内容" border="{{ false }}" /> </van-cell-group>  <view slot="right">删除</view> </van-swipe-cell>

自定义样式

简单粗暴查类名直接覆盖样式

CSS .van-swipe-cell__right { display: flex; align-items: center; justify-content: center; width: 65px !important; margin-left: -20px; text-align: center; color: #fff; background-color: #eb5757; }

外部样式自定义类名

注意这要是哪个组件本身支持才行

https://flowus.cn/preview/feaea771-500e-4402-864f-9256f3f63b92

CSS .cell-group-la { margin-bottom: 20rpx !important; background: red !important; }

css 变量的形式修改

CSS page { --cell-large-title-font-size: 30rpx; --cell-text-color: #ff0000; --cell-value-color: #686868; }

分包

限制

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

文件架构

页面和资源都在独立文件夹

https://flowus.cn/preview/e6863039-3c55-4aaa-b500-5f93d565972e

配置

app.json "pages": [ "pages/logs/logs", "pages/index/index", "pages/index2/index2", "pages/demo/demo", "pages/index3/index3" ], "subPackages": [ { "root": "detailPackage", "pages": [ "detail/detail" ] } ],

一些全局函数

getApp()

可以获取到全局数据, 实现数据共享

app.js // app.js App({ myData: { msg: '全局你好世界' }, // 小程序启动 onLaunch(params) { console.log('小程序启动初始化'); console.log('场景值', params.scene); }, onHide() { console.log('小程序隐藏到后台'); }, onShow(params) { console.log('小程序出现在前台'); // 可以得到用户来源的场景值, 供后续逻辑使用 // 比如搜索进来的用户, 跳到优惠券页面 // 如果是小程序入口进入, 可能是定位排队的页面 // 如果是扫码进入, 可能就是点菜订餐 console.log('场景值', params.scene); } }) 首页 onLoad() { // getApp 获取小程序实例 // 通常用来共享数据 const app = getApp(); console.log('app属性', app.myData); app.myData.msg = 'global hello world' }, 第二页 onLoad(options) { let app = getApp(); console.log('跳转页面后的全局数据', app.myData); },

getCurrentPages()

可以得到当前正在打开的页面栈, 可以取得其他页面的数据和方法

备注, 在小程序中默认页面跳转, 其实没有销毁页面只是放在后台缓存, 例外的情况是如果跳到 tabBar 其他的缓存页面会被销毁

JavaScript let currentPages = getCurrentPages(); console.log('当前页面栈', currentPages);

拉取项目

Shell git clone -b template https://gitee.com/lotjol/enjoy-plus.git cd enjoy-plus git branch -m template master git remote set-url origin https://gitee.com/imyyliang/8788enjoy-plus.git git push -u origin "master"

https://flowus.cn/preview/a1613c2c-6ce3-4347-8391-de43fc747c1d

启动项目

打开微信开发者工具

导入项目, 选择克隆的根目录

appid 填自己的(如果在公司工作就填公司的即可)

消息提示封装

JavaScript /** * 工具方法 */ const utils = { /** * 封装 wx.showToast * @param {string} title 消息提示的内容 */ toast(title = '数据加载失败...') { wx.showToast({ title, mask: true, icon: 'none', }) }, } /** * 扩展 wx 全局对象，切记不要与原用 api 重名 */ wx.utils = utils /** * 模块化导出 */ export default utils // app.js import './utils/utils' App({ globalData: {}, })

小结

我们学习了如何进一步熟悉组件的使用，以及第三方库vant ui的使用，学习了如何去分包加载，分包加载的优势，项目的正式搭建和项目的一些配置，公共方法的封装...

学习微信小程序第五天

wechat-http 插件使用

// 响应拦截器 http.intercept.response = res => { return res.data }

配置接口基础路径

拓展 git 忽略已经提交过的文件

可以考虑百度查找方案, 用的关键字 gitignore 不生效一般步骤如下

清理所有缓存

重新将所有文件添加

重新提交

https://flowus.cn/preview/0711bce7-2174-480f-80d8-1604656f5ecf

建议不要这样做, 而是在第一步清理所有缓存时, 只输入需要删除的文件/文件夹

git rm -r --cached (需要忽略的文件或文件夹相对路径)

重新提交即可

另外建议在操作这个动作之前, 将本来自己写完的代码先提交

如果一个文件已经被提交过到 git 系统, 再添加忽略名单已经没用

首页列表渲染

if (code !== 10000) return wx.utils.toast() this.setData({ notifyList })

} }) <navigator wx:for='{{notifyList}}' wx:key='id' hover-class='none' url='/pages/notify/index' class='notice' > <view class='notice-title'>{{item.title}}</view> <view class='notice-brief'>{{item.content}}</view> <view class='notice-date'>{{item.createdAt}}</view> </navigator>

登录检测组件

问为什么要封装一个登陆检测组件

为什么要在页面做这个逻辑, 是因为没有导航守卫

为什么要封装组件, 好多页面都要, 不能每个页面都写

全局获取 token

JavaScript token: '', onLaunch() { this.getToken() }, getToken() { this.token = wx.getStorageSync('token'); }

创建组件

https://flowus.cn/preview/4b62e9fd-5ddd-4f6b-a290-bb5e5ea1e84b

if (!isLogin) { wx.redirectTo({ url: '/pages/login/index' }); } }

使用组件

JSON "usingComponents": { "authorization": "/components/authorization/index" }, <authorization/>

处理校验登录前闪一下的问题

用组件插槽包住内容, 只有当 isLogin 真的为真, 检测完 token 才显示

如果没有登录就不显示, 在电脑模拟器上会闪一下白页面, 扫描预览在手机上就没有了

https://flowus.cn/preview/d5bed971-9cf8-463c-9c03-eda0ce5d2539

https://flowus.cn/preview/f67348f6-b5bb-4b0f-8add-7d1035efc3a5

带上当前页面路径到登录页

登录以后还可以回到本来想去的页面

wx.redirectTo({ url: `/pages/login/index?redirectURL=/${redirectURL}` });

登录页

倒计时

countDownChange(ev) { this.setData({ timeData: ev.detail, countDownVisible: ev.detail.minutes === 1 || ev.detail.seconds > 0, }) },

获取验证码

首先是验证码登录逻辑

https://flowus.cn/preview/45c2fda1-4fbc-4bd9-bbeb-55f82aaaf7d8

async getCode() { console.log('获取验证码');

// 获取手机号, 验证, 如果没问题, 发送请求 const mobile = this.data.mobile.trim() if(!this.verifyMobile(mobile)) return // 发请求 const {code, data} = await wx.http.get('/code', {mobile}) // 验证接口返回结果 if (code !== 10000) return wx.uitls.toast('发送失败, 请稍后重试!') // 发送验证码成功 wx.utils.toast('发送成功, 请查收短信!') console.log(data);

登录成功

async submitForm() { // 获取手机号 const mobile = this.data.mobile.trim() // 获取验证码 const code = this.data.code.trim() // 校验手机号和验证码 if(!this.verifyMobile(mobile)) return if(!this.verifyCode(code)) return // 发送请求 // 用户填写的手机号和验证码 // 调用接口登录/注册 const res = await wx.http.post('/login', { mobile, code }) // 校验数据是否合法 if (res.code !== 10000) return wx.utils.toast('请检查验证码是否正确!') console.log(res);

整个登录的逻辑小结

都是以用户的角度出发

填写手机号

双向绑定 mobile

获取验证码

默认倒计时布尔值为 false 不显示, 显示的是按钮

监听点击事件

获取手机号

验证手机号

发送请求

将倒计时显示出来(将变量布尔值改为 true)

填写验证码

双向绑定 code

点击登录

获取手机号 this.data.mobile

获取验证码 this.data.code

验证手机号封装函数, 在里面用正则判断

验证验证码

发送请求

小结

我们学习了如何进一步的去配置项目和项目中登录页的逻辑。

学习微信小程序第6天

完善登录

token储存

登录完页面跳转

拦截器注入token

refresh__token

用于延长token时效

逻辑拆分

全局记录

原token失效的时候 => 响应拦截器里面判断 token 失效

使用一个接口即可获得新的 token 数据

如果现在本来就已经是refresh_token 更新逻辑, 但是还是出错, 就应该跳出登录页

更新token以后重新将用户的请求再发一次 => 让用户实现无感更新

房产添加

定位经纬度

腾讯位置服务, 逆解析地址详情

注册账号, 获取 key 引入 sdk 导出实例

绑定页面渲染数据

个人信息

昵称修改

头像修改

回显数据

获取用户id发请求

setData更新数据

拿数据渲染页面

profile 改数据页面

my 个人中心页面

小结

完善了前一天的登录逻辑，学习了refresh_token的作用，以及其他模块的逻辑封装

微信小程序学习第7天

中午答疑解惑

深浅拷贝

表达式形式处理对象 key

添加房产（续）

跳转逻辑示意图

子主题1

附近小区搜索

用经纬度调用腾讯位置服务

跳转表单页绑定数据

房间页跳转

表单页绑定

onLoad 获取数据并设置data

点击按钮触发函数 submitForm 验证数据

页面数据绑定包括房屋信息, 姓名, 手机号和性别以及图片

身份证上传

房产上传

房产删除

滑动格子监听关闭, 获取 id / index

记录 id / index, 另外如果关闭时点击的是右侧按钮, 则打开二次询问弹窗

二次询问弹窗监听关闭事件

如果关闭时点击的是确定, 则发请求并更新数据

房产详情渲染

跳转页面时带上 id

进入页面拿到id获取数据 onLoad

在模板中插值表达式渲染

房产编辑

房产详情页跳转带id

表单页面如果接收到id就回显数据

跳转到楼栋选择

跳转时带参

生成假数据

跳转房间选择

楼栋选择页面点击事件带参跳转

房间选择页面获取参数伪造数据

小结

正常的去熟悉项目中数据增删查改的应用，模块的具体逻辑，让我们洞悉项目的本质大概就是数据的增删查改和权限的应用

学习微信小程序第8天

报修列表

发送请求拿数据

setData设置数据

status状态设置

值为 1 表示受理中，对应的样式类名 info 值为 2 表示上门中，对应的样式类名 success 值为 3 表示已完成，对应的样式类名 complete 值为 0 表示已取消，对应的样式类名 cancel

在模板中来渲染获取到的房屋列表数据

为了方便开发测试，后端提供了一个接口专门用来修改报修项目状态的接口，直接在 apifox 在线调用接口即可。

完成添加

表单数据双向绑定

选择房间和2维修项目时, id 数据补充

验证和发送请求并跳转

图片上传

获取后端选项列表

房产

维修项目

日期的转换

格式化日期封装

utils/utils.js文件

基本逻辑

子主题1

选项交互

房屋, 维修项目, 日期都一样

报修详情

普通数据渲染

拓展, 路线规划

取消报修

报修编辑

表单进入页面获取数据

确定保存时带上 id 即可

新增编辑时删除图片功能

监听事件

手动处理数据

访客

新增表单操作

触发弹窗

正则校验

发送请求

访客列表

发送请求拿到访客列表数据

setData设置数据

将数据用列表遍历方式在模板

访客通行证二维码

渲染

跳转时带 id

进入页面加载数据

onShareAppMessage

图片保存

async saveImg() { // 用api获取图片本地路径 const res = await wx.getImageInfo({ src: this.data.url, }); console.log(res); // 将图片存到相册当中(不支持网络图片) wx.saveImageToPhotosAlbum({ filePath: res.path, }) }

小结

同样完成项目模块的逻辑，学习微信小程序的图片保存方法和分享方法，进一步加深对微信小程序方法的理解和使用，总体下来，掌握了对原生小程序的方法应用和技巧，了解了后端数据对后台系统与小程序的区别，能过够快速上手项目。

注：change事件官方文档没有写，但经过测试可用，在发布版本请注意此项思维导图模板大纲

带上 url 进行跳转即可思维导图模板大纲

{ "usingComponents": { "child": "/components/child/child" } }思维导图模板大纲

一、研究内容思维导图