微信小程序

一、微信小程序是什么

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

二、微信小程序和普通HTML的区别

1. 微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分
2. 微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，普通HTML是单线程的，容易代码阻塞

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

微信小程序的注册

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

微信小程序登录

微信小程序登录地址：
https://mp.weixin.qq.com/

登陆后：找到开发-开发管理-开发设置-开发者ID
并复制自己的开发者ID

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

1. 微信开发者工具的下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 使用微信开发者工具创建小程序项目并运行
   进入后点击小程序，1.输入项目名称，2.选择保存文件位置，3.输入开发者ID，4.开发模式选择小程序，5.旋转是否使用云服务，6.下载语言，7.点击新建

五、如何手机运行测试

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

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

六、如何合作开发项目

1.在微信小程序管理后台：管理-成员管理-点击添加成员按钮，并搜索组员微信号进行添加
2.从码云上克隆项目
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并输入文件名并回车

八、小程序如何实现tabBar导航

第一步：在app.json中添加tabBar配置属性
第二步：在tabBar的list属性中配置要添加的条目
  注意：最少配置2个，最多5个

配置tabBar具体演示代码：

“tabBar”: {
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “/img/sy.png”,
“selectedIconPath”: “/img/sy1.png”
},
{
“pagePath”: “pages/logs/logs”,
“text”: “考试”,
“iconPath”: “/img/ks.png”,
“selectedIconPath”: “/img/ks1.png”
}
]
},

十、wxml常用标签

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

九、小程序常用指令

1. 小程序的常用指令

   (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的取反