目录
一、前置工作
备注:非TypeScript环境,此介绍为JavaScript环境
1、需要借助 微信开发者工具 来进行开发。
下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档
2、将代理设置设置为默认
3、在码代码的过程中少不了查阅文档
文档地址:小程序简介 | 微信开放文档
创建项目我们此次使用JavaScript 构建
二、了解基本文件结构
app.json
1、app.json中存放着当前的配置文件,在 pages 中存放着pages 文件夹下的目录结构
2、如果需要添加页面 则 需要在"pages" 数组中 添加字符串即可
3、pages 数组中索引为 0 的地址为 微信小程序的首页,更换首页交换位置即可
3、当然创建有多种方式,直接在pages 文件夹右键—> 新建Page 也同样可以创建页面
文件后缀对应常识
json 文件 ——> 页面配置项
wxml ——> html 文件
wxss ——> css 文件
三、常见标签及语法
1、view标签 及语法使用
view 标签的宽度默认为100%页面宽度
<view hover-class='hoo' hover-start-time="2000" >A</view>
<view> B </view>
<view> C </view>
2、文本标签text rich-text
rich-text 中的nodes属性 可以解析html标签,正常在小程序中 是无法解析html标签的
text 标签中的 user-select 属性可以让文本可以被选中
<rich-text nodes="<p>我是P标签</p>"></rich-text>
<rich-text nodes="<h1>我是h1标签</h1>"></rich-text>
<text user-select>我是文本且可以被选中</text>
3、轮播图
滚动效果:通过scroll-view 可以实现滚动效果
代码如下:
<scroll-view class="scroll-box" scroll-y>
<view class="view-1">A</view>
<view class="view-2">B</view>
<view class="view-3">C</view>
</scroll-view>
轮播图效果:通过swiper 配合 swiper-item 实现轮播图效果
<swiper indicator-dots autoplay circular>
<swiper-item>
<view class="view-1">A</view>
</swiper-item>
<swiper-item>
<view class="view-2">B</view>
</swiper-item>
<swiper-item>
<view class="view-3">C</view>
</swiper-item>
</swiper>
4、图片:image标签
<image/> 标签
通过mode 属性可以调整图片的显示属性,详情见文档image | 微信开放文档
<image src="./images/wyz.png" mode="aspectFit"/>
5、注册事件
bind:tap 、 bind:input 、bind:change 、catchtap
bind:tab 可以简写为 bindtab 其他事件同理
①、bind:tap 点击事件 类似于 @click
// info.js
data: {
val:'测试'
},
// 在data 同级下声明事件处理函数
boxHandel(e){
console.log(e);
},
// 给view 与 btn 绑定点击事件
<view class="view-1" bind:tap='boxHandel' >
<button size="mini" bind:tap='boxHandel' >btn</button>
</view>
②、catchtap 取消冒泡
以上代码 会造成事件冒泡,点击按钮会触发父组件和本身的事件
通过catchtap 可以取消事件冒泡
<view class="view-1" bind:tap='boxHandel' >
<button size="mini" catch:tap='boxHandel' >btn</button>
</view>
③、bind:input、bind:change
bind:input 在输入中触发事件
bind:change 在输入结束之后 失去焦点触发
<input type="text" model:value='{{val}}' bind:change='inputHandel' />
<input type="text" model:value='{{val}}' bind:input='inputHandel' />
6、事件对象
①、e.detail.value
可以获取到input 标签中的值
<input type="text" model:value='{{val}}' bind:input='inputHandel' />
inputHandel(e){
console.log(e.detail.value);
},
②、e.target e.currentTarget 的区别和使用
e.target 为获取触发事件的元素
e.currentTarget 为获取 此事件绑定的元素
<view class="view-1" id="box" bind:tap='boxHandel' >
<button id="inner" size="mini" >btn</button>
</view>
boxHandel(e){
console.log(e.target);
// console.log(e.currentTarget);
},
当我依次点击 按钮 与红色外侧盒子时:
可以看到,获得到的 是我点击时的元素,那么我使用currentTarget 时候呢?
因为点击按钮的时候 会通过事件冒泡的形式来触发box 的事件
这次的结果都是获取到的 外侧的红色盒子
结论:e.currentTarget 为获取 此事件绑定的元素,e.target 为获取触发事件的元素
7、给事件处理函数传参
e.currentTarget.dataset 可以获取到传递的参数,data-index,这个index就是传递的参数
<view class="view-2" data-index="10" bindtap='viewHandel' ></view>
viewHandel(e){
console.log(e.currentTarget.dataset.index);
},
8、获取data中的数据
// 获取data中的 val 属性
this.data.val
9、设置data中的数据
使用 this.setData() 方法,传递一个对象,对象名为修改的属性,属性值为 修改后的值。
与setter 比较像
<text>{{count}}</text>
<button bindtap='addCount' >+1</button>
addCount() {
this.setData({
count: this.data.count + 1
})
},
10、循环语法
循环插值表达式内的 arr。
在微信小程序中,index 默认为循环的索引,item 默认为循环的每一项
// js 文件
data: {
arr: ['a', 'b', 'c']
}
// wxml 文件
<view wx:for="{{arr}}">
<view>{{index}}</view>
<view>{{item}}</view>
</view>
需求1:当我不希望使用index——item 的名称来对循环的内容命名怎么办呢?
当然,我们也可以自定义循环的内容名称
// 将index 命名为 i ; 将item 命名为 itemName
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="itemName">
{{i}}----{{itemName}}
</view>
需求2:因为此时遍历的标签是 view ,他会让每一个循环项目 独占一行,如何避免呢?
我们可以使用block 标签来解决,这相当于vue 中的<template>
block:只做包裹元素的容器,不会渲染到页面上
<block wx:for="{{arr}}" wx:for-index="i" wx:for-item="itemName">
{{i}}----{{itemName}}
</block>
需求3:我发现我的调试工具有报错,缺少了Key
在微信小程序中:*this 为数组元素,利用数组元素当key
此时我们修改为数组包含对象来循环
// js 文件
data: {
list: [
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'}
]
}
// wxml 文件
<view wx:for="{{list}}" wx:key="*this">
id:{{item.id}}----name:{{item.name}}
</view>
当然我们绝大多数的选择肯定是id 也可以利用对象中的id 来作为key
( 可以直接省略对象. 的形式,直接使用item. 就可以了 )
<view wx:for="{{list}}" wx:key="item.id">
id:{{item.id}}----name:{{item.name}}
</view>
问题:什么时候需要加key?
我们尝试制作一个简单版的todolist
此时如果已经选中了一项数据,当我新增一项时,会有以下结果
本身我选择的是id 为2 的数据 但是他变化了,此时可以看出 跟vue的情况一样,当我不需要操作页面的时候,那么可以不设置key,当我需要操作内容时,必须设置key
当我们设置key时,页面可以正常操作了
<view wx:for="{{list}}" wx:key="id">
<checkbox/>id:{{item.id}}----name:{{item.name}}
</view>
11、条件显示(if else)
使用input 双向绑定 score 数据,输入数据 显示对应考试的评价
<input type="text" model:value='{{score}}' />
<view wx:if="{{score>=90}}" >
考的非常优秀
</view>
<view wx:elif="{{score>=80}}" >
考的说得过去
</view>
<view wx:elif="{{score>=60}}" >
刚考及格
</view>
<view wx:else >
不及格
</view>