微信小程序入门总结

一、学会搭建小程序开发环境
二、掌握结构（.wxml）、样式（wxss）、行为（js）、常用配置（json）

一、小程序项目结构
1．App.js------项目如何js文件
2．App.json-----全局的配置文件
3．App.wxss-----全局样式
4．Pages
（1）Wxml------页面结构
（2）Wxss-----页面样式
（3）Js--------页面行为
（4）Json-----页面配置

vscode写小程序的两个插件：wxml minapp

二、Wxss
1．相当于css,页面样式权重高于全局样式。(注意不能像less或者scss一样嵌套或者定义变量)
2．新的单位rpx
（1）微信官方规定，不管你的屏幕实际宽度是多少，我强制规定，宽度为750rpx
三、Wxml
1．常用的组件
（1）View 相当于div
（2）Text 专门存放文本，相当于span
（3）Button 按钮组件
①面试题：小程序如何获取用户的手机号
1）在回调函数getPhoneNum中可以获取手机号，但是需要解密

2．如何绑定事件
（1） bind + 事件类型 = 事件处理函数 支持事件冒泡
事件类型在这里：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
注意事项：如何给当前绑定的函数传递参数？？？
在当前的标签上面绑定自定义的属性，一般以data-开头，让后我们可以在事件处理函数中的形参—事件对象中获取

（2） catch + 事件类型 = 事件处理函数 会阻止事件冒泡

3．列表的渲染：wx:for

4．条件渲染 wx:if的值为true则渲染当前节点，否则隐藏当前节点

5．如何绑定动态的数据（注意：如果是在标签的上绑定动态属性，那么在{{}外面必须加上引号“”}）

四、Js
1．页面数据
（1）定义

（2）使用
①在js文件中使用 ：this.data.xxx
②在wxml中使用

（3）修改

2．全局数据
（1）持久化的数据（类似于浏览器里面的localStorage）

（2）非持久化的数据
①定义（只能在app.js里面定义）

②使用：通过一个全局的方法getApp去访问

③修改：像一个对象一样修改即可

五、Json
1．全局配置（app.json）
（1）Pages（最重要） 用来配置页面路径，默认第一个元素就是首页

（2）tabBar 用来配置底部的tab

（3）Window 配置页面顶部的标题或者背景颜色等

2．页面配置（权重高于全局配置）
（1） navigationBarTitleText 配置顶部导航栏标题