1. 今日学习目标
- 微信小程序的帐号注册
- 微信小程序的开发者工具使用
- 微信小程序的基本目录结构
- 微信小程序的配置
- 微信小程序的模板语法
- 微信小程序的条件渲染、事件
2. 什么是微信小程序
-
什么是微信小程序
微信小程序官方释义（baike.baidu.com/item/%E5%BE…）
- 一个前提：必须安装了微信；
- 划重点：不需要下载安装即可使用的应用 ；
- 微信体系（微信订阅号、微信服务号、微信企业号）的重要组成部分
- 使用过哪些小程序
- 微信官方出品小游戏 跳一跳
-
小程序／移动端网站／app都是什么玩意儿？—— 都是为了适应移动应用时代
- app —— 必须在应用市场下载安装；根据手机系统可分为ios版本，安卓版本；例如：淘宝app／京东app／微信app等；
- 移动端网站 —— 通过手机浏览器访问的网址链接，例如：淘宝（main.m.taobao.com/）；京东（https:…
- 小程序 —— 依托微信，在微信里可以直接访问的应用 ；
-
小程序优势
-
轻量化
小程序不像APP一样，需要下载安装，需要注册登录。小程序的特点是即用即走，也可以从当前平台直接授权用户资料；用户使用小程序的决策成本要比使用APP低得多，更有利于吸引用户使用；
-
背靠生态
微信小程序背靠着微信巨大的流量平台，能够有效地从生态当中去吸引流量；
-
方便营销
小程序的营销工具要比公众号等自媒体要多，裂变属性比APP更强；用小程序能够有效地进行营销活动；
-
一句话总结
- 小程序发展势头正足，好好学才是硬道理
-
3. 微信小程序的注册
-
开放开台与公众平台的区别
-
开放开台，是微信开放的一些公用的API接口，如微信登陆，微信支付。
-
公众平台：为小程序，小游戏开发服务的平台。
-
区别：
开放平台常用于前端开发，开发者常依托于微信平台来开发一些功能，并嵌套在微信app内部使用。
公众平台常用于后端开发，开发者往往是第三方软件开发者，使用微信提供的接口与自家软件做功能对接。
-
-
通过是否登录成功来验证注册是否成功
-
微信开发者工具下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html -
双击打开
微信开发者工具然后 微信 扫码登录即可 -
填写项目的信息
- 成功显示了第一个小程序应用
-
介绍微信开发者工具界面／工具
模拟器 —— 预览小程序；
编辑器 —— 写代码的工作区；
调试器 —— 测试打印，给程序员自己看的内容；
编译 —— 重新加载小程序。
-
登陆地址 ： mp.weixin.qq.com/
4. 微信小程序的基本目录结构
| 字段 | 作用 |
|---|---|
| pages | 用来存放所有小程序的页面，每个页面都是一个单独的文件夹 |
| utils | 用来存放工具性质的模块 |
| app.js | 整个小程序项目的入口文件 |
| app.json | 全局配置文件 |
| app.wxss | 全局样式文件 |
| project.config.json | 项目的配置文件 不常用 |
| sitemap.json | 配置页面被微信搜索到的一些设置 不常用 |
5. 微信小程序最精简代码结构
-
app.jsApp({}) -
app.wxss里面为空
-
app.json{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" } -
pages/index/index.wxml可以为空
-
pages/index/index.wxss可以为空
-
pages/index/index.jsPage({}) -
pages/index/index.json{ }
6. 解读小程序中的文件以及代码
微信小程序 基本结构和网页的基本结构对比
-
网页 三层结构
- html
- css
- js JavaScript
-
微信小程序 四层结构
wxml写标签的部分 类似htmlwxss写样式的部分 类似cssjsJavaScriptjson页面配置
7. 如何快速的创建页面
> 1. 直接编辑 `app.json` 中的 `pages` 字段即可 微信开发者工具会自动的创建页面。
> 2. **需要注意的是** 当改动了`app.json` 文件之后,必须要手动的在`微信开发者工具`中 保存 `app.json`
在app.json文件中修改pages属性，新建cart购物车页面，mine我的页面，保存之后会看到在pages下面
{
"pages":[
"pages/index/index",
"pages/cart/cart",
"pages/mine/mine"
],
}
8. 微信小程序配置
8.1 全局配置 app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
| 字段 | 作用 |
|---|---|
| pages | 设置页面的路径 |
| window | 设置窗口的外观 |
| tabBar | 导航结构 |
| style | 全局定义小程序组件使用的样式版本 |
| sitemapLocation | sitemap文件的位置 |
"window":{
"backgroundTextStyle":"light", // 下拉刷新时，显示的文字的样式 ,值只有二个，light dark
"backgroundColor": "#333", // 下拉刷新时，看到的背景颜色
"navigationBarBackgroundColor": "#fff", // 标题栏中的颜色
"navigationBarTitleText": " ", // 标题文字
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true // 全局开启下拉刷新，现在只是演示用，真实开发中，不这么做。
}
更多window属性，请点击
去掉警告信息
在 project.config.json 文件中的 setting 节点中添加配置
"checkSiteMap":false,
8.2 页面配置
每个页面文件夹中的 .json 配置文件，对当前本页面的窗口外观的配置文件，会覆盖全局的app.json的相同配置项
-
在全局配置中指定了窗口的颜色，默认情况下每一个页面的颜色都会受到全局配置中的影响；
-
希望单独在某一个页面中显示不同的标题，不同的颜色，在页面配置中单独做个设置
cart.json； -
页面配置中能做的设置有限，只能够设置全局配置中的
window的字段；
cart.json
{
"usingComponents": {},
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor": "#FF69B4"
}
默认显示的还是index页面，如何查看购物车页面的效果呢？
只需要在app.json文件中，把"pages/cart/cart"挪到第一位即可
"pages":[
"pages/cart/cart",
"pages/index/index",
"pages/mine/mine"
]
8.3 tabBar
需求: 实现类似于如下图的标签导航效果
- 需要5个页面 十个图标 五个未选中 五个选中
2. 需要将 图片素材引入到项目
格式化代码快捷键
alt + shift + f 格式化代码
- 在 app.json 文件中配置tabBar属性
"pages":[
"pages/index/index",
"pages/cart/cart",
"pages/search/search",
"pages/mine/mine"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/icon/_home.png",
"selectedIconPath": "/icon/home.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/icon/_img.png",
"selectedIconPath": "/icon/img.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "/icon/_search.png",
"selectedIconPath": "/icon/search.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/icon/_my.png",
"selectedIconPath": "/icon/my.png"
}
]
},
- 优化tabBar
"tabBar": {
"selectedColor": "#d52d80",
"color": "#909090",
}
演示效果如下：
整理代码的快捷键： alt + shift + f
9. 模板语法
9.1 简单的体验：
view —— div，块级元素，独占一行；
text —— span，行内元素，一行多个；
数据绑定使用 Mustache 语法（双大括号）将变量包起来
需求：页面的某些数据需要动态变化，怎么整？ —— 找到js文件；设置data；使用差值表达式{{time}} 动态展示数据；
index.js
Page({
// data中存放的数据 即将要在页面中直接显示的数据
data:{
// 属性
time:"2022年9月23日 15:16:58",
}
})
index.wxml
<view> {{time}} </view>
9.2 基本数据显示
1.字符串类型 —— time: "2021年11月2日 15:16:58"
2.数值类型 —— num: 10000
3.布尔类型 —— flag：true／false；
4.对象类型 —— person: { name: "王一博", height: 190 } （通过点语法访问属性值）
5.数组对象 —— 一个数组里的每一项都是对象类型（使用循环语法）
9.3 数组数据的循环显示
-
wx:for -
wx:key- 普通数组的时候
wx:key="*this"
list: [ "王一博","易洋千玺","肖战"]-
对象数组的时候
wx:key=循环项中的属性名(属性名的值是唯一的)wx:key="id"因为name值 不唯一了有两个王一博
- 普通数组的时候
list2: [ {
id : 1,
name:"王一博"
},
{
id : 2,
name:"易洋千玺"
},
{
id : 3,
name:"王一博"
}]
-
默认循环项
{{ item }} -
默认循环索引
{{ index }}
js
Page({
// data中存放的数据 即将要在页面中直接显示的数据
data: {
// 属性 字符串类型
time: "2022年11月2日 15:16:58",
// 数值类型
num: 10000,
num2: 1,
// true false 布尔类型
isShow: true,
// 对象类型
person: {
name: "王一博",
height: 190
},
/* 数组显示 才是重点和难点 */
list:[
"王一博","易洋千玺","肖战"
],
// 对象数组
list2: [
{
id : 1,
name:"王一博"
},
{
id : 2,
name:"易洋千玺"
},
{
id : 3,
name:"王一博"
}
]
}
})
wxml
<!--
web div a span img h1 ....
小程序
1 div => view 块级元素 会占一整行
2 span => text 行内元素 放多个元素在一行上
3 当我们发现 页面中的某些数据需要动态的发生变化的时候
1 找到页面的js文件
2 data对象
3 在wxml中 通过两个花括号 来使用
-->
<view> {{time}} </view>
<view>数量 {{num}}</view>
<view>数量相加 {{ num + num2 }}</view>
<view>布尔类型 {{isShow}}</view>
<view>对象类型 {{person.name}} {{person.height}}</view>
<view>=============</view>
<!--
数组 循环相关 for
1 wx:for
2 循环项 list[index] item = 数组中的每一个元素
循环的索引 index
3 必须提供一个key属性 提高循环的性能 wx:key
1 数组 如果是list 类型 wx:key="*this"
2 数组 变成了 对象数组形式 list2 wx:key="循环项中的某一个属性即可"
1 一定要保证这个属性的值是唯一的
2 key后面的变量不需要加花括号
-->
<view
wx:for="{{list}}"
wx:key="*this"
> {{item}} </view>
<view>++++++++++++++++++</view>
<view wx:for="{{list2}}" wx:key="id">{{index}} {{item.name}} --- {{item.id}}</view>
9.4条件渲染
使用 wx:if="" 来判断是否需要显示该代码块
xxx.js 文件中：
data: {
name:'tom',
age:100,
isTrue:true
},
xxx.wxml 文件中：
<!-- 条件渲染 if elif elif else -->
<view wx:if="{{age < 18}}">
{{name}} 是 小孩
</view>
<view wx:elif="{{ age >=18 && age < 60}}">
{{name}} 是 大人
</view>
<view wx:else>
{{name}} 是 老人
</view>
10. 事件
1. 点击页面某个按钮 触发一些行为
1. 点击按钮是固定不变
2. 行为是不一样的
10.1 事件的初体验
wxml
<!--
1 绑定事件关键字 bind + 事件名 tap
2 bindtap="函数名称" 可以随便起名字
3 回到js文件中 定义 事件函数 需要做什么业务
-->
<view bindtap="getTime">点击 打印时间</view>
js
Page({
// 事件函数
getTime() {
console.log(new Date())
}
})
10.2 事件传递参数 --- 点击+10/+100小案例
1.分别完成+10/+100
2.使用data-num 自定义属性来实现一个方法传递不同参数；
wxml
<view>{{num}}</view>
<!-- <button bindtap="add" >+10</button>
<button bindtap="add100">+100</button> -->
<!--
h5 有规定 如果想要自己定义一些标签的数据 建议 data- 开头
事件传递参数
1 wxml中 data-num="{{10}}"
2 js中 event.currentTarget.dataset.num
-->
<!-- data-* 属性用于存储页面或应用程序的私有自定义数据。
存储的数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。 -->
<button data-num="{{10}}" bindtap="add" >+10</button>
<!-- 注意：会变成字符串拼接 -->
<button data-num="100" bindtap="add">+100</button>
js
Page({
data: {
num: 0
},
// add(){
// 获取到data中num的值
// var num = this.data.num;
// 对num进行加法计
// num = num + 10;
// 把num增加后的值重新设置回data中
// this.setData({
// num:num
// })
// },
add(e) {
// 事件源对象 存放点击事件触发的时候的一些信息
// 你点击的是谁 button标签 标签上有什么数据 data-add=10
// 获取要增加的数量的值
console.log(e);
var data = +e.currentTarget.dataset.num
this.setData({
num: this.data.num + data
})
}
})
