学习小程序

小程序是什么

1.目前公司主流前端技术：H5,JS(ES5/6/7/8/9/),vue,小程序,Flutter,React
2.微信小程序是一种不需要下载安装即可使用的应用（腾讯）
3.微信小程序发布时间2017年1月9日
4.商业模式利于产品推广

小程序如何使用

1：注册微信小程序账号

注册网址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
帐号信息 -> 邮箱激活 -> 信息登记
AppID(小程序ID) 进入小程序后台找到开发选项复制出来在小程序后台添加成员管理，方便协作开发

2：下载微信开发者工具并安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3：打开微信开发者工具创建微信小程序

微信开发者工具集预览，开发，调度，上传于一体的工具

4：利用开发者工具进行小程序开发

小程序的优势：

1. 快速的加载
   2.更强大的能力
   3.原生的体验 （Native体验，即android,ios的App体验）
   4.易用且安全的微信数据开放
   5.高效和简单的开发

5：小程序的开发目录结构：
utils:存放平时开发时常用的工具函数 app.js:小程序项目的逻辑入口 相当于vue中的main.js app.json:是小程序的全局配置文件，会影响每个页面的配置 app.wxss:是小程序的全局样式,会影响每个页面的样式 project.config.json:项目的配置文件（一般不需要改动） sitemap.json:小程序的搜索蜘蛛（一般不需要） pages:平时开发页面的目录 相当于vue中的src目录

通常一个小程序页面包括4种类型的文件：以index页面为例来说明
index.js:页面的JS逻辑 相当于H5中的JS
index.json:指当前页面的配置文件（注意：只能使用app.json中window的各种配置）
index.wxml:指当前页面模板 相当于H5中的html
小程序常用标签：
view:相当于H5中的div
image:插入图片，相当于H5中的img
text:嵌入文本 相当于H5中的span
block:逻辑包裹标签，最终不渲染到页面中 相当于vue中template标签
index.wxss:指页面的样式 相当于H5中的css

如何在小程序中创建新页面

直接在目录创建文件 或者 在app.json中通过pages选项直接添加路径，然后自动生成页面的4个文件

页面与组件如何区分：页面：Page({})组件：Component({});

小程序常用指令

1.遍历数组：wx:for 相当于vue中的v-for
注意： index:代表遍历的索引，item:代表遍历每一项
如果不改变index和item的名子，则需要设置：
更改索引：wx:for-index=“idx”
更改每一项wx:for-item=“ite”
为了提高遍历性能，通常在遍历时加上wx:key,类似于vue中的key
2.条件渲染：
wx:if:条件true渲染标签，false不渲染，类似于vue中的v-if
hidden:条件true隐藏标签，false显示标签,类似于vue中的v-show

小程序事件处理

1.绑定事件：
格式： bind+事件名=“方法名”
如何传参：通常利用自定义属性来传参
说明：H5通常data-自定义属性名来传参

2.触发逻辑操作
数据驱动操作如何同步到视图？？？？
this.setData({}); 类似于React中的this.setState({});
补充：只更新某一条数据，而不是整体覆盖更新
思路：通过指定下标解析一个字符串的方式来只更新某一条数据
//let tempItem=‘users[’+idx+’].name’
let tempItem=users[${idx}].name;
this.setData({
[tempItem]:要更新的值
})