微信小程序学习思维导图

小程序概述

定义

特点

应用场景

开发环境搭建

下载安装开发工具

注册开发者账号

创建小程序

选择模板或自定义模板

配置小程序信息

小程序框架介绍

结构

生命周期

组件

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

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

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

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

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

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

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

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

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

[]添加新功能

[]修改首页样式

[]增加分类页面

[]实现搜索功能

[]优化页面交互

[]增加加载中提示

[]优化页面渲染速度

[]创建新页面

[]增加页面跳转功能

[]完成页面设计

[]学习微信小程序API

[]调用API获取数据

[]处理API返回数据

[]回顾所学内容

[]总结经验教训

[]制定下一步学习计划

如何实现动态列表？

如何在列表中添加图片？

如何使用模态框？

利用组件`<scrollview>`实现

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

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

利用组件`<image>`实现

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

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

利用组件`<modal>`实现

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

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

静态布局

添加水果

删除水果

头像获取

昵称获取

wx.navigateTo

wx.redirectTo

wx.switchTab

wx.navigateBack

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

安装插件

自定义组件

组件通讯

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

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

父组件

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

子组件

HTML <slot/>

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

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

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 变量的形式修改

整个小程序所有分包大小不超过 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" ] } ],

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

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); },

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

备注, 在小程序中默认页面跳转, 其实没有销毁页面只是放在后台缓存, 例外的情况是如果跳到 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的使用，学习了如何去分包加载，分包加载的优势，项目的正式搭建和项目的一些配置，公共方法的封装...

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

配置接口基础路径

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

清理所有缓存

重新将所有文件添加

重新提交

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

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>

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

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

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

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

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

验证验证码

发送请求

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

token储存

登录完页面跳转

拦截器注入token

用于延长token时效

逻辑拆分

定位经纬度

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

绑定页面渲染数据

昵称修改

头像修改

回显数据

profile 改数据页面

my 个人中心页面

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

深浅拷贝

表达式形式处理对象 key

跳转逻辑示意图

附近小区搜索

房间页跳转

表单页绑定

房产删除

房产详情渲染

房产编辑

跳转时带参

生成假数据

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

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

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

发送请求拿数据

setData设置数据

status状态设置

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

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

表单数据双向绑定

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

验证和发送请求并跳转

房产

维修项目

格式化日期封装

utils/utils.js文件

子主题1

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

普通数据渲染

拓展, 路线规划

取消报修

报修编辑

新增编辑时删除图片功能

新增表单操作

访客列表

访客通行证二维码

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