avatar

目录
【前端20_微信】准备、WXML 操作、JS:数据绑定、条件语句、事件、更新数据、存储、双向数据绑定、图片选择,预览、对外暴露、模板

微信小程序简介

  • 小程序的大小限制在 2MB 以内

开发前的准备

首先要注册个微信开发者工具,来这个网站
https://mp.weixin.qq.com/wxopen/waregister?action=step1
我用邮箱注册的(我新建的网易163邮箱)

小程序 ID

注册完之后把你的 ID 记住了

在这里插入图片描述

在这里插入图片描述


下载开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据你自己的操作平台来下载,我的是 Win10


新建工程

安装完开发者工具之后,打开它
在这里插入图片描述


编译界面简介

在这里插入图片描述


WXML 的基本开发

创建新的页面

  • 我们点开 app.json 文件,在 "pages" 这个数组中添加新的语句,我填的是 "pages/demo1/demo1",,这句话就是声明一个名为 demo1 的新页面,然后按下< kbd>Ctrl< /kbd> + < kbd>S< /kbd>,保存好之后在左侧的 pages 文件夹中自动生成 demo1 文件夹
  • 注意 pages 这里谁写在第一位,那么在开启小程序的时候就会展示这一页,你可以想象成主页。
    在这里插入图片描述
    在这个文件夹中自动生成四个文件,其中的 .wxml 就类似 .html.wxss 就类似 .css,我说的类似是他们功能是相似的,但是里面的语法,及标签的使用还是有些许区别的
    在这里插入图片描述

创建 tabBar

简单操作

首先 tabBar 是个啥呢?就是你打开微信,下面的四个切换栏

app.json 文件中

1
2
3
4
5
6
7
8
9
10
11
12
"tabBar":{
"list":[
{
"pagePath":"pages/demo1/demo1",
"text":"demo1"
},
{
"pagePath": "pages/index/index",
"text": "index"
}
]
},

注意

  • 对象中最后一项语句的末尾,是不可以有逗号的,比方说这个 "text":"demo1",他是对象中最后一个键值对,它的最后面不可以加逗号的,也就是写成 "text":"demo1",
Javascript
1
2
3
4
{
"pagePath":"pages/demo1/demo1",
"text":"demo1"
}
  • 颜色的表示方法,很多都是 十六

具体添加方法如下
在这里插入图片描述

添加 tabBar 的图标

微信官方给的要求:
icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

首先来这个网站 https://www.iconfont.cn/ 搜索你想要的图标,比方我要微信上的 Chats 图标
在这里插入图片描述

  • iconPath 这个属性是选项卡没有选中时的图片,通常为灰色
  • selectedIconPath 选项卡选中时的图片,微信是绿色的,这两个图片我们都要设置

在这里插入图片描述


页面的编写

  • 新的标签名字 view 类似原先的 div

以下是水平的滑动,演示如下
在这里插入图片描述
代码如下

html
1
2
3
4
5
6
7
8
9
10
11
< !--pages/demo2/demo2.wxml-->
< scroll-view id="scroll" scroll-x="true">
< view class="flex">
< view class="item item1">1< /view>
< view class="item item2">2< /view>
< view class="item item3">3< /view>
< view class="item item4">4< /view>
< view class="item item5">5< /view>
< view class="item item6">6< /view>
< /view>
< /scroll-view>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* pages/demo1/demo1.wxss */
#scroll{
width: 750rpx;
height: 100px;
box-sizing: border-box;
border: 1px salmon solid;
}
.flex{
display: flex;
width: 1300px;
justify-content: space-between;
}
.item{
height: 100px;
width: 200px;
}
.item1{
background-color: gold;
}
.item2{
background-color: rgb(34, 148, 11);
}
.item3{
background-color: rgb(223, 123, 84);
}
.item4{
background-color: rgb(165, 45, 95);
}
.item5{
background-color: rgb(87, 37, 204);
}
.item6{
background-color: rgb(151, 102, 123);
}

轮播图

轮播图 < swiper> 需要配合 < swiper-item> 来一起使用

html
1
2
3
4
< swiper>
< swiper-item>1< /swiper-item>
< swiper-item>2< /swiper-item>
< /swiper>

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
这是官方给的轮播图的属性

其他

常用的标签在官网上都有说明,需要的话自行查找


JS

简介

小程序中是没有 dom 的,依赖于 数据的绑定

定义、引用变量(数据绑定)

目前我们需要把变量声明到 xx.js 文件中的 data 里,放在这里的变量可以用在 wxml
在这里插入图片描述
data 里是对象,里面放 "key":"value",我在里面放了个

Javascript
1
2
3
data: {
flag:"true"
},

如何在 wxml 页面引用变量?
两个花括号

html
1
< text>{{flag}}< /text>

这样引用变量既可以当属性名,也可以用来做属性值
在这里插入图片描述

条件

微信小程序中的条件是 wx:if

html
1
2
3
4
5
6
7
8
9
< view wx:if="{{flag > 0}}">
if
< /view>
< view wx:elif="{{flag < 0}}">
elif
< /view>
< view wx:else="{{flag == 0}}">
else
< /view>

wx:ifhidden 都能实现隐藏,那么他俩的区别在于

wx:if是惰性求值,渲染都不渲染,切换的时候卡

hidden,频繁切换的话,效率高一点,他是渲染的,上来就卡

循环

通过 wx:for="" 来声明循环那个对象,,通过 wx:item="item" 来声明对象中每个元素叫啥,这里取名叫 item ,取名任意,你想改就改

html
1
2
3
< view wx:for="{{arr}}" wx:item="item">
{{item}}
< /view>

更新数据

更新数据需要用到 setData,这里更新完的数据会传递到页面中供其使用
刚开始我们需要 let that = this; 使指针指向对象,这个对象是 page 里的那个对象,就是下面动画里选中的这一大坨
在这里插入图片描述

Javascript
1
2
3
4
5
6
7

let that = this;
that.setData({
//这里填你想要修改的值
"key":"value"

})

这个key值如果有变量的话就要在外部拼接好,然后在这里用解构,比方说下面的例子

Javascript
1
2
3
4
var key = `arr[${choiseIndex}].boolean`;	//这里的key有变量choiseIndex,在外部拼接好了
that.setData({
[key]: false //这里不能直接写key,要用中括号解构好变量,像这样:[key]
})

点击变色(1)

问题描述:我点击 li,这个 li 就变色,在点击另一个 li,另一个 li 变色,上一个li就恢复原来的颜色,只能存在一个 li 是变色的
演示如下
在这里插入图片描述

解决思路:

  • 首先小程序里没有 Dom 节点,只能通过数据绑定了
  • 那么我们可以通过切换每个标签的类名,实现样式的改变
  • 我给每一个标签加上索引,判断 点击的索引 == 标签的索引,如果是,就给他加样式,如果不是就不用管它

抛出问题:

  • 如何给标签加属性索引?
  • 如何在 js 中找到点击的是哪一个?

解决问题:

  • 我用 data-xxx ,把他写在标签里,相当于给标签加上了新的属性,写它的好处在于你能在 js 文件中通过事件因子 e 找到你点击的是哪一个在这里插入图片描述
  • 我们可以通过事件因子中的 e.currentTarget.dataset 这里找到我们在标签里写的属性。
    在这里插入图片描述

注意:

  • that.setData({})只有在这里修改 data 里的数据,才会把更改后的新数据传到页面中,你在他外面修改data 的数据值,是不会传递到页面中去的

完整代码

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//js
//上面的Page没有写,函数是写在page里的
data: {
arr:["a","b","c","d"],
tapIndex:-1
},

changeCol(e){
var that = this;
var tapIndex = e.currentTarget.dataset.index;
that.setData({
tapIndex: tapIndex
})
},
html
1
2
3
/*wxml*/
< text>点击那个那个变色,只有一个变色< /text>
< view wx:for="{{arr}}" data-index="{{index}}" bindtap="changeCol" class="color{{tapIndex == index ? 'Select':'Normal'}}">{{item}}< /view>
css
1
2
3
4
5
6
.colorNormal{
color: black
}
.colorSelect{
color:red
}

点击变色(2)

问题描述
击那个就切换颜色,再次点击取消颜色
演示如下
在这里插入图片描述

解决思路

  • 给每一个 li 添加一个状态,这种状态记录着它是否被点击过,因为我们循环的数据,那么我们暂且把这种状态加到数据里
Javascript
1
2
3
4
5
6
7
8
9
//我的这组数据中 num 就是记录这种状态,默认 -1 为未点击状态
data: {
arr: [
{ data: "第1", num: -1 },
{ data: "第2", num: -1 },
{ data: "第3", num: -1 },
{ data: "第4", num: -1 },
],
},
  • 我还是通过 data-num="" 来寻找点的是哪一个标签
  • 重点!!!: 我们在用 setData 来更新 data 里的数据的时候,对象里的 key 值一定是个字符串
Javascript
1
2
3
4
//错误1: key值为变量,arr[index].num 是不会被解析的
that.setData({
arr[index].num : 1
})
Javascript
1
2
3
4
5
6
7
//错误2: key值为变量,result 里是有 index 的,
//index 也是变量不是字符串,照样是不会被解析的
var result = "arr[" + index + "].num";
that.setData({
result : 1
//等价于 "arr[" + index + "].num" : 1
})
Javascript
1
2
3
4
5
//正确示范:加上中括号,里面的变量就可以解析了(es6)
var result = "arr[" + index + "].num";
that.setData({
[result] : 1
})

完整代码

html
1
2
3
4
5
6
7
8
9
10
11
12
< !--页面.wxml-->
< text>点击那个就切换颜色,再次点击取消,跟电影院选位置一样

< /text>
< view wx:for="{{arr}}" data-num="{{index}}" bindtap="changeCol">
< view wx:if="{{item.num != -1}}" class="colorSelect">
{{item.data}}
< /view>
< view wx:else class="colorNormal">
{{item.data}}
< /view>
< /view>
css
1
2
3
4
5
6
7
/* 样式.wxss */
.colorNormal{
color: black
}
.colorSelect{
color:red
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data: {
arr: [
{ data: "第1", num: -1 },
{ data: "第2", num: -1 },
{ data: "第3", num: -1 },
{ data: "第4", num: -1 },
],
},

changeCol(e) {
var that = this;
var index = e.currentTarget.dataset.num;
var result = "arr[" + index + "].num";
if(that.data.arr[index].num == -1){
that.setData({
[result] : 1
})
}else{
that.setData({
[result]: -1
})
}
},

双击/单击

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//简写输出语句
var {log:l} = console;
Page({
data: {
last:0,
},

//设置空属性,等会延时定时器的名字
funC:null,

timeEnd:0,
timeStart:0,

touchStart(e){
//记录触屏按下时的时间戳,赋值给对象中的timeStart属性
this.timeStart = e.timeStamp;
},
touchEnd(e){
//记录触屏手抬起时的时间戳,赋值给对象中的touchEnd属性
this.timeEnd = e.timeStamp;
},

double(e){
let that = this;
//如果(抬起 - 按下)的时间小于350毫秒,那么就可以判断他不是长按了
//然后我们区分单击还是双击
if (that.timeEnd - that.timeStart < 350){

let now = e.timeStamp; //记录现在按下的时间戳
let last = that.data.last; //取出上一个记录的时间戳
that.data.last = now; //更新上一个的时间戳

if (now - last < 300) { //如两次抬起的时间差小于300ms
clearTimeout(that.funC); //清除定时器
l("double"); //判断为双击,并输出提示
} else {
that.funC = setTimeout(function(){
l("single"); //否则设置延时定时器,并在300ms之后输出单击
},300)
}
}
},
})

存储

这个是官方的,我这里记一些我觉得有用的
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

  • 同步、异步,是要看项目的需求的,如果你的数据需要及时的读,那么就要同步
  • 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象
  • 优化:存储数据的话以 id 为关键字来存储,例如 "用户名",[{属性1},{属性2},{属性3}],用数组对象来放置属性,这样你在移除 id 的时候只需要移除用户名的 value 就圆满了,尽量避免碎片化的存储记录

双向数据绑定

提出问题:我是否可以在页面wxml中更改input值,点击提交,同时 js 里也能获取到这个值

数据绑定,原先都是js里些数据,然后绑定渲染到页面中,那么可不可以反过来呢?

分析问题的需求 ,给 input 绑定这个事件最好不过了,bindblur,input 失焦就会触发这个事件(我原先是绑定的bindinput,这个事件每次输入值的话就会触发,这样事件就会触发很多次,然而 触发事件是消耗内存的

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// pages/12-10/demo6/input.js

// 触发事件会消耗内存的,所以尽量少一些触发事件

//一下这些写在page里錒!!
data: {
valueInput:null
},

inputBox(e){
let that = this;
console.log(e.detail.value);//好奇的话可以打印e事件因子看看里面都有啥
that.setData({
valueInput: e.detail.value
})
},

网页如下

html
1
< input bindblur="inputBox" placeholder="输入密码" id="inputId" value="{{valueInput}}">< /input>

图片选择、预览

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
//选择图片
//你可以把这段程序放在按钮的点击事件上
wx.chooseImage({ //选择照片
count: 9, //能选照片的最多数量,最大是9
sourceType: ['album', 'camera'], //选择照片的方式
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
that.setData({
imgSrc: tempFilePaths
})
}
});
Javascript
1
2
3
4
5
6
7
8
9
//预览图片
previewImage(e){
var that = this;
// 全屏显示图片
wx:wx.previewImage({
urls: that.data.imgSrc, //当前显示图片的http链接数组,
current: that.data.imgSrc[e.currentTarget.dataset.id] //需要预览的图片地址
})
},

wxml 模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

html
1
2
3
4
5
6
7
8
9
10
11
< !--name名字定义 -->
< template name="msgItem">
< view>
这是一个模板
< /view>
< /template>


< !--is来调用html 的模板
is里可以使用{{三目运算符}} -->
< template is="msgItem" data=""/>

对外暴露并引用

如果你想在 js 中调用别的 js 文件中的函数或者属性,那么你就需要把要调用的属性 对外暴露

  • 关键语句 module.exports.testA = testA; 这里前面的 testA 你可以起任何名字,后面的 testA 是你要暴露的函数/属性名字
Javascript
1
2
3
4
5
6
7
//比方说我要暴露这个 testA 的函数,让他在别的 js 中也能调用
let {log:l} = console;
function testA(){
l("testA()",1);
}
//对外暴露方法 module.exports.给对外暴露的方法起名字 = 想要调用的方法
module.exports.testA = testA;

引用的方法如下

Javascript
1
2
3
4
5
//这个写在Page外面
let container = require("a.js"); //先写引用的路径,把模块保存到container里

//这个可以写在 onLoad 里测试一下
container.testA(); //调用这样调用,模块.函数名
  • 模块化思想: 依赖关系,如果你想封装百度地图的天气信息,你先把百度功能的天气提取然后封装到一个对象中,然后暴露这个对象
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/15958.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论