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数据展示

如下：

<view>{{info}}</view>
<image src=”{{imageURL}}”></image>

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后面的代码演示，找到我们需要的即可