微信小程序详细教程（建议收藏）-慈云数据

一.小程序的开发准备

1. 小程序的安装与创建

第一步打开小程序官网
第二步找到开发管理，找到开发设置，下面有一个AppID，复制即可，后面开发小程序需要用
新建项目，需要先下载微信开发工具下载网址，安装完成之后进入如下的界面。复制刚才的AppID,选择不使用云开发，javascript基础模板，进行创建
这样就成功创建了小程序，页面显示如下

2. 小程序的介绍

小程序就是微信里面app，16年推出，它的内存，源码，图片，存储，接口与数据都有限制。在微信自由分享，不用下载app，能快速的开发，使用微信的API接口。竞品：支付宝小程序，钉钉，美团，头条，抖音，QQ,小程序等。

我们发现小程序的界面主要由一下几部分组成
项目的组成主要包括以下内容
页面组件pages/home

home.wxml 模板文件
home.js业务逻辑
home.wxss 样式
home.json 页面配置
1. 特别注意勾选⭐⭐ 不检验合法域名
2. 小程序的限制
  源文件大小每个包不能超过2M 总共不能超过16-20M
  
  页面缓存堆栈5层底部栏最少2个最多5个底部栏图片31K
  
  本地存储 1次1M最多100M
  
  setData 不能超过1M
  
  功能和微信一致（右上角胶囊按钮，下拉刷新...）
3. 如何新建页面
1. 在pages文件夹右键建立新的文件夹
2. 在文件中右键新建页面
3. ⭐哪个page在最上面，默认显示哪页
4. ⭐json要求严格语法，不能有多余的注释和逗号
  pages 注册页面 window 窗口信息
4.修改页面默认设置（页面配置）
1. 这是页面默认的
2. 我们对导航栏背景颜色，标题，文字颜色进行了修改
```
{
"enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle": "dark",背景文字颜色
"backgroundColor": "#f70",背景颜色
"navigationBarTitleText": "小时讲笑话",
"usingComponents": {} 组件
}
```
二.小程序的相关语法

1.小程序的模板语法约等于vue的模板语法
1. 文本渲染 {{msg}}
  可以执行简单的js表达式{{2+3}} {{msg.length}}
2. 条件渲染
  wx:if=""
  wx:elif=""
  wx:else
3. 列表渲染
  wx:for="{{list}}"
  wx:key="index" {{item}} {{index}}
4. 自定义列表渲染
  定义item与index的名称
  wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myidx" {{myidex}} {{myitem}}
5. 导入（不常用）
  import 只能导入templat内容
```
用户名：{{name}}          
```
include 只能导入非template内容
```
{{内容}}
```
2. 内置组件
```
（1） view组件   块组件
（2）text组件  行内组件
（3）  button组件 按钮
（4）  input组件 表单
```
3. wxss

默认单位是rpx
750rpx等于一个屏幕的宽
375就是50%的宽

4. 事件
1. 事件
  （1）bindinput 表单输入时
  （2）bindconfirm 表单输入确认
  （3）bindtap点击时候
2. 事件的传参
  🚩获取事件的参数 e.target.dataset.msg
5. 表单
1. 表单的绑定
```
  
```