微信小程序开发

一、微信小程序是什么

1. 微信小程序是一种不需要下载安装即可使用的应用
2. 微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、微信小程序商业价值

1. 依托微信，有强大广泛的用户基础，推广方便
2. 不用安装，即点即用，不用关闭，不占手机内存空间

三、微信小程序和普通H5的区别

1. 微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分（数组，字符串方法，for,if…）
2. 微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞

四、微信小程序的帐号注册及开发流程

1. 微信小程序的注册
   注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
   按照连接地址给出的提示进行注册
2. 微信小程序登录：
   https://mp.weixin.qq.com/
   登录后：找到开发-开发管理-开发设置-开发者ID

AppID(小程序ID) wxb61621e772a9f027
3. 开发和发布流程 ：开发->提交->审核->发布上线

五、小程序环境搭建与目录结构

1. 微信开发者工具的下载与安装
   下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 使用微信开发者工具创建小程序项目并运行
   创建小程序项目的界面如下：
   

六、手机运行测试

点击微信开发者工具–预览按钮（二维码预览和自动预览）

真机调试：通过开发者工具控制台来实时的高度真机上的项目

七、项目组合作开发项目

1.在组长微信小程序管理后台：管理-成员管理-点击添加成绩按钮（搜索组员微信号按提示添加）
2.从码云上克隆项目(第一次：git clone，后面只是git pull)
3…每天完成对应的任务
4.再提交到组长指定的仓库分支上

八、小程序目录结构分析与说明

目录结构说明：
app.js:小程序的入口文件 相当于vue中的main.js
app.json:是小程序的全局配置文件，即如果没配置页面json，会自动使用app.json中的配置
app.wxss:是小程序的全局css样式文件,会影响到所有小程序页面的样式
了解 project.config.json：是开发者工具环境配置项
了解 sitemap.json：是不允许小程序蜘蛛索引页面
pages:咱们平时干活常用的目录 相当于vue上的src
index
index.wxml:即页面的结构 相当于html
index.wxss:即页面的样式 相当于css
index.js:即页面的逻辑部分
index.json:即页面的配置文件

utils:存放常用工具函数的目录,方便复用

问题：小程序如何创建一个新的页面？

新建页面目录–在目录上右键–选择新建page并输入文件名并回车

九、wxml常用标签

1. view标签：是一个块级标签，相当于普通H5中的div
2. text标签：是一个行内标签 相当于span
3. button：按钮
4. block:是一种不会渲染到页面的标签 相当于vue中template标签,起到一个逻辑组织代码块的作用
5. image:插入图片

十、小程序常用指令

(1)遍历：wx:for 相当于vue的v-for

注意：
默认的遍历每项用item表示
默认的下标用index表示
通过wx:for-index=“自定义下标名称” 实现下标自定义
通过wx:for-item="自定义每项名称"实现每项名称的自定义
通过使用wx:for遍历时通常跟一个wx:key来提高遍历性能，通常wx:key用*this或遍历对象的唯一属性名表示

例如：

商品名称：{{ index+1 }} 、 {{ item.name }}
–商品价格： {{ item.price }}

(2)条件渲染：

第一种：wx:if
wx:if 相当于vue中的v-if
wx:if 和wx:else

第二种：hidden 相当于vue中的v-show的取反