1、体验官方提供的小程序组件/接口等

可以点击进入相关组件看看效果和如何使用。

2、提前了解小程序的开发与发布

2.1 注册一个小程序的开发账号

https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1313416074

个人只能注册个人的账号，不能注册企业的账号，个人的账号无法调用微信支付的高级接口。

2.1.1 获取appid

注册完小程序，可以在如下找到

2.2、小程序的协同工作与发布推广

1、添加项目成员和体验成员

2、小程序的版本

3、小程序的发布

1、上传代码

上传后可以从以下图中看到上传的代码

2 、提交审核

3 、发布上线

4、小程序的推广

1、查看小程序的运营数据

3、微信小程序开发者工具使用

3.1 安装

3.2 创建小程序项目

3.3 开发者工具使用功能介绍

3.3.1 常用的菜单工具

打开开发者文档

构建npm
控制功能窗口是否展示
（注意模拟器有时无法真正正常展示开发的功能，一切已扫描二维码测试为准）
查看小程序的本地配置基本信息等
控制模拟器的展示机型（建议选择iphone 6/7/8 ）可以切换当前模拟器页面的页面路径、页面参数、场景值等。

3.3.2 预览开发中的小程序界面

方式一点击编译

方式二点击预览，出现一个二维码，用手机微信扫描即可在手机看到界面

3.3.3 常用的开发功能

调式器可以像浏览器一样，调式小程序的页面

4、微信小程序代码结构介绍

4.1 目录结构介绍

1 pages 小程序页面目录

用来存放所有小程序的页面，定义一个页面由如下4部分组成，如index页面

（1）页面里的.json文件

如下小程序的index页的导航就会变成绿色。

（2）页面里的.wxml文件

（3）页面里的.wxss文件

（4）页面里的.js文件

2 app.json全局配置文件

3 project.config.json项目配置文件

对应菜单中的详情

4 sitemap.json项目是否被微信索引配置文件

如下page为* ， action为allow，表示所有页面允许被索引（如果不允许改成disallow）

5、小程序环境与代码开发

小程序的宿主环境就是微信，微信给小程序提供了如下：

5.1通信模型

5.2 运行机制

5.3 页面组件

5.3.1 视图容器组件基本使用

5.3.1.1 展示view组件

5.3.1.2 滚动效果scroll-view组件

5.3.1.3 轮播图swiper和swiper-item组件

5.3.2 基础内容组件基本使用

5.3.2.1 文本text组件

长按选中只能在真机测试，在开发工具里无法测试

5.3.2.2 富文本rich-text组件

5.3.2.3 按钮button和图片image组件

button的使用如下

image的使用如下

5.4 页面API

5.5 新建小程序页面

（测试时创建不成功，从新创建项目又可以了）

5.6 修改小程序首页

5.7 小程序页面中4个文件的开发

5.7.1 js文件开发

1、数据定义

2、事件定义

5.7.2 wxml文件开发

1、数据绑定

将js里定义的data数据展示

如下：

2、三元运算符

3、调试器看到当前渲染的数据

4、算术运算

5、事件绑定

（1）介绍

（2）点击事件事例

（2.1）通过点击事件修改data中的数据

（2.2）点击事件传参

<button type="primary" bindtap="btnTapDeliveryPara" data-para="{{22}}">传参事件数字</button>
<button type="primary" bindtap="btnTapDeliveryPara" data-para="小宝">传参事件字符串</button>

（3）文本框输入事件

下图的input应为<input bindinput="inputHandler"></input>

（本人测试时进行了手动编译才行，可能工具没反应过来）

（3.1）文本框与data之间的数据同步

第一步：定义数据

第二步：渲染结构

第三步：美化输入框

第四步：绑定input处理事件，实现与data之间的数据同步

6、条件渲染

（1）wx:if wx:else

（2）block控制多个组件的展示与隐藏

（3）hidden

7、列表渲染

（1）wx:for

（2）vx:key

5.7.3 wxss文件开发

1、rpx尺寸单位

2、@import样式导入

3、全局样式和局部样式

权重大小判断就是定位到更小层次的权重一般较高，样式就按权重高的，可以把鼠标放上去可以展示权重，

如下图一比图二的权重就高

5.7.4 json文件开发

1、配置当前页

2、监听当前页的下拉刷新

3、监听上拉触底的加载

（1）上拉加载数据预防多次请求数据

案例如下

4、动态设置导航栏标题

如下场景需要设置动态标题，查官方文档

根据官方说明只能在如下图方法中设置

5.8 全局配置window窗口部分（app.json ）

window可以配置如下图中的导航栏区域和背景区域

5.8.1 window节点常用配置项

（1）举例设置导航栏标题

（2）举例设置导航栏背景色

（3）举例设置导航栏标题颜色

（仅支持black/white）

（4）全局开启下拉刷新

不建议全局开启下拉刷新，通常在需要的页面里的json文件开启当前页有下拉刷新

（5）全局下拉的窗口背景色

（6）全局设置下拉的loading的样式

仅支持light、dark

（7）设置上拉触底的距离

5.9 全局配置页签tabBar（app.json）

1 tabBar页签介绍

（注意tab项里指定的pagePath相关的页面，在pages里应排在头部的位置，否则可能不展示）

2 tabBar页签设置举例

在app.json中加如下

"tabBar": {
"list": [
{
"pagePath": "
pages/pageSamples/pageList/list",
"text": "页面",
"iconPath": "
/images/icon/unchecked1.png",
"selectedIconPath": "/images/icon/checked1.png"
},
{
"pagePath": "
pages/buttonSamples/buttonList/list",
"text": "按钮",
"iconPath": "
/images/icon/unchecked2.png",
"selectedIconPath": "/images/icon/checked2.png"
},
{
"pagePath": "
pages/richTextSamples/richTextList/list",
"text": "富文本",
"iconPath": "
/images/icon/unchecked3.png",
"selectedIconPath": "/images/icon/checked3.png"
},
{
"pagePath": "
pages/swiperSamples/swiperList/list",
"text": "轮播图",
"iconPath": "
/images/icon/unchecked4.png",
"selectedIconPath": "/images/icon/checked4.png"
},
{
"pagePath": "
pages/scrollViewSamples/scrollViewList/list",
"text": "滚动菜单",
"iconPath": "
/images/icon/unchecked5.png",
"selectedIconPath": "/images/icon/checked5.png"
}
]
},

效果

3、自定义tabBar页签(需要用到组件)

步骤一、配置信息

如下为兼容低版本的,tabBar里的list不要删除

步骤二、添加tabBar代码文件（新建组件）

步骤三、使用Vant提供的样式组件

根据Vant后面的代码演示，找到我们需要的即可

小程序是用什么开发的，微信小程序开发教程1（从0基础到学会UI组件开发）