一、本期要点：
1.学会注册小程序帐号
2.安装小程序开发者工具
3.创建小程序项目
4.熟悉小程序目录结构
5.小程序hello world
要点1：学会注册小程序帐号
打开：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
注册完登录小程序后台：开发-开发者设置--AppID(小程序ID) wxf4be8f9be8e111a2
要点2：下载并安装小程序开发者工具
下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
要点3.创建小程序项目
打开安装好的微信web开发者工具，点击+创建小程序项目，添加项目名称，指定小程序目录和appid-->点击创建
4.熟悉小程序目录结构
pages目录：是你平时干活的目录 相当于vue中的src
utils目录：存放平时封装的一个工具目录 例如：封装ajax等
app.js:小程序入口 相当于vue中的main.js
app.json:小程序的全局配置
app.wxss:是小程序的全局样式
project.config.json 小程序项目的环境设置，通常不动
要点5.小程序hello world（创建页面）
一个小程序页面包括的文件类型：
以pages中的index目录为例：
index.js:页面的js逻辑
index.json：当前页面的配置
inex.wxml：页面模板 相当于html
index.wxss: 页面样式，相当于css
一、重温小程序如何创建页面
1.手动建立
2.批量建立：
右键pages->创建目录
右键在创建的目录->新建page->命名并回车
二、小程序数据绑定
通过在data:{}中添加数据，通过在wxml页面中添加{{ }}来绑定数据
绑定数据的形式：字符串，数值，数组
三、小程序数据遍历和判断
数组如何遍历：通过wx:for，通过item添加每一项，通过index添加索引
例如：
<view class="goods-list">
<view class="border_bottom"
wx:for="{{ list }}"
wx:for-index="要改的下标名称"
wx:for-item="要改的项的名称"
>
<view>商品编号：<text>{{ id+1 }}</text></view>
<view>商品名称：<text>{{ item.name }}</text></view>
<view>商品价格：<text>{{ item.price }}</text></view>
</view>
</view>
四、小程序css选择器
小程序css选择器只能使用：class,id
一、重温小程序如何创建页面
1.手动建立
2.批量建立：
右键pages->创建目录
右键在创建的目录->新建page->命名并回车
二、小程序数据绑定
通过在data:{}中添加数据，通过在wxml页面中添加{{ }}来绑定数据
绑定数据的形式：字符串，数值，数组
三、小程序数据遍历和判断
数组如何遍历：通过wx:for，通过item添加每一项，通过index添加索引
例如：
<view class="goods-list">
<view class="border_bottom"
wx:for="{{ list }}"
wx:for-index="要改的下标名称"
wx:for-item="要改的项的名称"
>
<view>商品编号：<text>{{ id+1 }}</text></view>
<view>商品名称：<text>{{ item.name }}</text></view>
<view>商品价格：<text>{{ item.price }}</text></view>
</view>
</view>
注：通过
wx:for-index="要改的下标名称"
wx:for-item="要改的项的名称"
不改默认每一项的名称：item,
不改默认每一项的索引：index
四、小程序css选择器
小程序css选择器只能使用：class,id,标签（例如：view,text）,群组,:after,:before
五、条件渲染
小程序支持的条件渲染：wx:if,hidden 两种
wx:if 相当于vue中v-if，满足则创建出来，不满足删除
hidden 相当于vue中的v-show的取反
例如：
<view wx:if="{{ 布尔值 }}"> //满足条件，渲染的内容 </view>
<view wx:else>不满足条件显示的内容</view>
五、小程序事件绑定
格式： <标签 bind事件类型="要触发的方法名">文本</标签>
例如： <view bindtap="要触发的方法名">点我</view>
六、小程序页面如何传参
两种方式：
第一种：通过自定义属性传参 例如：data-自定义属性名="值"
第二种：通过路由跳转传参
七、小程序页面如何跳转
wx.navigateTo({
url: 'test?id=1'
..
注：如何动态改变小程序的标题（即title）
第一种：手动修改
第二种：用程序修改
八、小程序如何获取后台数据 ****************
后台返回格式：json
交互方式：
1.js原生 XMLHttpRequest()
2.jQuery: $.ajax({ }),$.get(),$.post(),$.getJSON()
3.Vue: axios
4.React: fetch
5.微信小程序：wx.request({ }) 和jQuery的$.ajax()类似
注意：
1.小程序通常不支持本地的JSON文件，通常放在线上的一个真实地址
2.小程序线上接口地址必须是 https://xxxxx.como/api/goods.json
git网站静态化，可以像买了域名和空间的网站一样
用git将本地代码
先推送到线上gitee pages-启用
配置小程序后台线上域名即白名单
开发-服务器域名
request合法域名 ：https://wxw666.gitee.io
1.小程序如何遍历
wx:for="{{ 要遍历的数组名 }}"
2.小程序如何实现条件渲染
wx:if,hidden
3.小程序如何绑定事件
<button bind事件名="要触发的方法名">点我</button>
例如：<button bindtap="play">点我</button>
4.小程序如何跳转页面
wx.navigatorTo({
url:'要跳转的地址'
})
5.小程序两个页面之间如何传参
传参：通过自定义属性配合 wx.navigatorTo
接参：在另一个要接收的页面通过onLoad中的options来接收
=================================================================
本节要点：
1.再一次讨论页面跳转
2.小程序的钩子函数
3.小程序的UI组件
4.小程序的生态圈
一、再一次讨论页面跳转
跳转方式有两种：类似vue的两种方式
第一种：标签方式（navigator） 类似于vue-router中的router-link
第二种：js方式（有4个）
**** wx.navigateTo(Object object)
wx.switchTab(Object object)
wx.redirectTo(Object object)
wx.reLaunch(Object object)
二、小程序的钩子函数
三、小程序的UI组件
1.轮播组件：swiper
2.switch：开关
3.picker：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器
一、小程序实现自定义组件
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程
第一步：创建一个components文件夹
内部创建要复用的组件,例如：Dialog
右键新建Dialog目录->右键新建component并生成四个文件
第二步：如何在其他页面引入刚才创建的Dialog组件
参考资料：
https://www.jianshu.com/p/8a2a730d9e60/
二、在小程序中如何mock数据
（一）在小程序中使用mock数据的步骤：
第一步：下载文件：mock.js,wxmock.js并引入到utils目录中
第二步：创建接口文件，即要请求的模拟数据接口 例如：user.js
在utils下创建一个user.js文件，生成要用的模拟数据，例如：
//引入基于小程序的wxmock
var Mock = require('../WxMock.js')
//基于ajax请求地址的模拟数据
//格式： Mock.mock('请求地址',数据模板)
var users=Mock.mock('https://1608A.com/users', {
"codeText":"成功返回",
"code": 200,
"data|1-20": [
{
"name": function () {
return Mock.Random.cname()
},
"lastLogin": function () {
return Mock.Random.datetime()
}
}
]
})
var del=Mock.mock('https://xxx.com/user/delete', {
"code": 200,
"message": "s删除成功"
})
//请求文章列表
var article=Mock.mock('http://www.baidu.com/getArticle',{
"code":666,
"successText":"成功返回",
"content":[
{"id":1001,"name":"文章标题","content":"文章内容"},
{"id":1002,"name":"文章标题222","content":"文章内容222"}
]
})
export default {
users,
del,
article
}
第三步：使用接口渲染数据（即：在需要请求的页面中用wx.request()来请求需要的数据）
wx.request({
url:'http://www.baidu.com/getArticle',
success:function(res) {
console.log('我在购物车页面我得到的数据：',res)
}
})
（二）如何生成mock数据
1.生成序列
Mock.mock({
"number|+1": 202
})
参考资料：
mock.js官网：http://mockjs.com/examples.html
微信小程序 - 模拟数据工具 WxMock
https://github.com/webx32/WxMock
网友评论