微信小程序常用笔记整理【一】（简约版）

微信小程序 vs 快应用？

---

最近一段时间似乎注定了一群人又开始了新一轮的“挖坑”和“填空”之旅，就在各种吃瓜群众莫名其妙中，快应用伴随着微信小程序的日渐火热诞生了，作为一个前端工程师，真的很难想想这意味着什么？所以还是好好的学好微信小程序吧。（ps:毕竟已入坑太深了。。。。。。）

本文将整理可能在日常开发中，常用的微信小程序知识概况，请对照文档查看，大神请绕行

【什么是微信小程序】

（小程序的安装包下载是小于1M，不是真的不需要下载，感觉还是太年轻啊~）

【小程序的商业价值】

【小程序对开发者的影响】

【小程序文件结构】

1.js文件；
2.json文件；
3.wxml文件，是编写小程序“骨架”的文件；
4.wxss文件；
（页面”就近原则“和页面层级最多5级）

【小程序页面注册】

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等（ 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。）

【text组件】

注意：只有个被text组件包裹的文字才可以被手机端长按选中

【注册页面】---- 每个页面必须注册，第一项为启动项

【swiper组件】

仅可放置在组件中，宽高自动设置为100%，样式需要设置在根节点swiper组件上

【RPX单位使用经验（借鉴）】

一般来讲，水平布局可以使用rpx单位，垂直布局可以使用px单位

【小程序js文件结构】

首先执行onLoad函数，然后执行onShow函数，然后执行onReady函数（单页面）

【小程序数据绑定】

是单向数据绑定，采用的是事件驱动的方式

【block组件】

将 wx:for 用在标签上，以渲染一个包含多节点的结构块

【事件绑定】

以bind或catch开头，做事件绑定

【wx.redirectTo】

关闭当前页面，跳转到应用内的某个页面

【wx.navigateTo】

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

【冒泡事件和非冒泡事件】

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

【小程序js文件导出】

可以对外共享本模块的私有变量与函数。

module.exports = {
FOO: foo,
bar: bar,
};
复制代码

【小程序js文件引入】

使用require函数，且必须使用相对路径

var tools = require("./tools.wxs");
复制代码

【template模板】

template模板相当于一个占位符，编译后并不存在
WXML 提供两种文件引用方式import和include
import可以在该文件中使用目标文件定义的template
使用import标签来导入模板路径，使用template标签的属性来引入模板内容及数据

【组件自定义属性】

组件自定义属性使用"data-*"前缀进行绑定

【数据绑定调试】

习惯并熟悉使用开发者工具的AppData进行数据绑定的调试工作

【缓存Storage】

同一个微信用户，同一个小程序 storage 上限为 10MB
wx.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
wx.setStorageSync(KEY,DATA)将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

【交互反馈wx.showToast】（常用）

显示消息提示框，多数情况下与三元操作符配合使用

【操作反馈wx.showModal】（常用）

显示模态弹窗

【交互反馈wx.showActionSheet】（常用）

显示操作菜单

---

先整理到这吧，毕竟大脑又开始宕机了，对照着文档把这些查一遍，写几个demo，应该可以了（ps：信了你的邪）