微信小程序

微信官方文档 · 小程序

1. 开始

1. 注册，注册小程序账号，来管理自己的所有小程序项目。小程序注册页
2. 登录，登陆小程序管理后台，可以管理小程序的权限，代码发布等操作，在小程序管理后台可以看到小程序的AppID。
   
3. 安装开发者工具，在开发者工具下载页面，根据自己的操作系统安装对应的安装包。
4. 新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

2. 新手入门注意

1. 设置 - 通用设置，根据自己的代码编写习惯，设置代码保存以及编译等情况。
   
2. 创建小程序时，在创建项目的时候要把项目名称写在目录里，这样才会在项目目录下创建一个该项目名称的文件夹，第一行的项目名称也会自动填充（也可以手动输入）。
   

3. 在微信小程序使用vant组件库

1. 在微信开发者工具-调试器中倒开终端，输入npm init ，回车，此时会初始化一个package.json 文件，终端输入的文件信息可以直接回车，也可以输入信息。
   
2. 在终端输入安装Vant的命令

# 通过 npm 安装
npm i @vant/weapp -S --production

3. 在微信开发者工具 - 工具，构建npm，构建后会生成 miniprogram_npm 文件夹。
4. 在项目中引入vant组件，注意修改文件路径。
在 .json 文件中

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index"
  }
}

5. 在页面中使用

6. 渲染成功

组件

快速新建一个页面
在app.json中的pages里写好页面的路由名称，保存即可自动创建。

标签

1. view
   块级元素，独占一行，相当于div、p标签
2. text
   行级元素，一行显示，相当于span

• selectable 属性，被包裹的元素在页面中长按会被选中。
• decode 属性，是否解码，decode可以解析的有：nbsp/gt/lt/amp/ensp/emsp/apos

  <text decode>转译空格&nbsp;转译空格</text>
  <text decode>转译小于号&lt;转译小于号</text>

3. button

• type 属性，primary/default/warn
• form-type 属性，submit/reset，该标签属性使用时，标签要在form表单中（bindreset事件，bindsubmit事件）
• open-type 属性，getUserInfo/getPhoneNumber/contact
  open-type 是微信开放的新的方法
  静默授权：不需要用户授权，就能获取部分信息
  授权登陆：需要给用户一个按钮，让用户点击登录
  登录：调用wx.login() 目的是为了获取用户的code，发送给后端，后端返回opendi和session_key，存起来。

4. form

• bindsubmit 方法，
• bindreset 方法，

5. checkbox
   复选，具有开闭标签，可以在开闭标签内写上复选文字内容

• value 属性，可以填入真实的值

6. radio
   单选，具有开闭标签，可以在开闭标签内写上复选文字内容
   如果要实现单选效果，必须配合radio-group标签使用，radio标签包裹在radio-group标签中

• value 属性，可以填入真实的值

7. block
   标签块，其本身不会被渲染到页面中，里面包裹的内容标签能会被渲染到页面
8. input
   输入框

• type属性， text/password/number(number属性效果在电脑端不会看出效果，在手机上，点击number类型的输入框呼出的就是数字键盘)/idcard(数字加X键盘，输入身份证号码)/digit(小数点键盘)
• password 属性，
• value 属性，输入框的值
• placeholder
• placeholder-style
• placeholder-class
• disabled
• max-length

事件绑定

1. 点击事件
   bindtap=“事件名”
2. 监听文本框输入的值是否改变
   bindinput=“事件名”
3. 事件传参：类似于自定义属性的方式
   在标签内写成 data-val = ‘1’ 的形式，必须以data- 开头，-后面的是属性名，等号后面是传的值，多个参数时依次 写在后面即可。

<button bindtab="clickMe" data-value1="1" data-value2="2">  普通按钮 </button>

获取参数

clickMe(event){
  console.log(event.currentTarget.dataset);   //{value1:1,value2:2}
}

data

存放数据的地方

data:{
  msg : hello world
}

1. 在页面中展示 { {msg}}
2. MVVM框架
   M：Model 数据，data里面的东西
   V：View 视图，人眼看到的页面
   VM：