目录
小程序和普通网页的区别
小程序运行在微信环境中,而普通网页运行在浏览器,所以小程序不存在跨域问题,不能调用dom和bom的API,只能使用小程序提供的API
一、注册和下载小程序
小程序官网https://mp.weixin.qq.com/
正常按照注册即可,每一个人都有一个专属的AppID,我们在开发的时候会用到
下载小程序开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
使用的时候我们不建议使用云服务,然后使用JS基础模版
1.app.js
-
是
整个小程序项目的入口文件
,通过调用App() 函数
来启动整个小程序
-
2.页面的 .js 文件
-
是
页面的入口文件
,通过调用Page() 函数
来创建小程序页面,并运行小程序页面
-
-
3.普通的 .js 文件
-
是
普通的功能模块文件
,用来封装公共的函数或属性
供页面使用
-
- 目录介绍
pages |
用来存放所有小程序的页面 |
utils |
用来存放工具性质的模块(例如:格式化时间的自定义模块) |
app.js |
小程序项目的入口文件 |
app.json |
小程序项目的全局配置文件 |
app.wxss |
小程序项目的全局样式文件 |
project.config.json |
项目的配置文件 |
sitemap.json |
用来配置小程序以及页面是否允许被微信搜索到 |
-
这里我们就简单介绍一下目录、下载和创建项目,b站的视频一大把就不详细说明了
小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/
二、常用的视图容器类组件
-
view 组件
-
普通视图区域
-
类似于 HTML 中的 div ,是一个块级元素
-
常用来实现页面的布局效果
-
-
scroll-view 组件
-
可滚动的视图区域
-
常用来实现滚动列表效果
-
-
swiper 和 swiper-item 组件
-
轮播图容器组件和轮播图 item 组件
-
三、事件绑定
小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于 HTML 中的 click 事件 |
input | bindinput 或者 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
target 和 currentTarget 的区别
-
target
是触发该事件的源头组件 -
currentTarget
则是当前事件所绑定的组件
-
e.target
指定的是触发事件的源头组件,因为e.target
是内部的按钮组件 -
e.currentTarget
指向的是当前正在触发事件的那个组件,因此e.currentTarget
是当前的view
组件
四、事件传参
可以为组件提供 data-*
自定义属性传参,其中 * 代表的是参数的名字
<view>
<button type="primary" bindtap="bindTap2" data-num="{
{ 2 }}">
+ 2
</button>
</view>
data: {
count: 0
}
// count 值 + 2 处理
bindTap2 (e) {
this.setData({
count: this.data.count + e.target.dataset.num
})
}
获取 input 中输入的值一般通过 e.detail.value 去拿到
五、修改data中的数据
我们只能通过this.setData({})去进行修改
//html
<view>
<input value="{
{ msg }}" bindinput="setMsg" />
</view>
//js 实现文本框和 data 之间数据的同步
data: {
msg: ``
}
setMsg (e) {
this.setData({
msg: e.detail.value
})
}
//css
input {
border: 1px solid lightcoral;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
六、条件判断if..elif..else和hidden
- 其实这两个东西就相当于vue中的v-if和v-show
iflese就是去动态创建标签去控制盒子显示隐藏
hidden是通过css中的display去控制盒子显示隐藏,频换切换咱们就使用hidden,反之使用这个ifelse
<view wx:if="{
{ true }}">
<view>亚瑟</view>
<view>妲己</view>
<view>蒙恬</view>
</view>
<view hidden="{
{ false }}">
条件为 true 隐藏,条件为 false 显示
</view>
七、wx:for
这个东西相当于vue中的v-for只是语法不同
使用如下:
<view wx:for="{
{ arr }}">
索引是: {
{ index }},数组的每一项是:{
{ item }}
</view>
data: {
arr: ['亚瑟', '妲己', '蒙恬']
}
//wx:for 的 index 和 item 设置别称
<view wx:for="{
{ arr }}" wx:for-index="idx" wx:for-item="itemName">
索引是: {
{ idx }},数组的每一项是:{
{ itemName }}
</view>
这个vx:key,类似于 Vue
列表渲染中的 :key
,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key
值,从而添加渲染的效率
八、rpx单位
rpx(responsive pixel)
是微信小程序独有的,用来解决屏幕适配的尺寸单位
-
rpx
的实现原理-
rpx
是实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx
把所有设置的屏幕,在宽度上等分为 750 份
,即当前屏幕的总宽度为750 rpx
-
在较小的设备上,
1rpx 所代表的宽度较小
-
在较大的设备上,
1rpx
所代表的宽度较大
-
-
小程序在不同的设备上运行的时候,会自动把
rpx
的样式单位换算成对应的像素单位来渲染,从而显示屏幕适配 -
px和rpx的转换比例
-
以
iPhone6
为例,iPhone6
的屏幕宽度为375px
,共有 750 个物理像素,则750rpx
=375px
=750
物理像素 -
也就是
1rpx
=0.5px
=1 物理像素
-
设备 | rpx 换算 px (屏幕宽度/750) |
px 换算 rpx (750/屏幕宽度) |
---|---|---|
iPhone5 |
1rpx = 0.42px |
1px = 2.34rpx |
iPhone6 |
1rpx = 0.5px |
1px = 2rpx |
iPhone6 Plus |
1rpx = 0.552px |
1px = 1.81rpx |
九、微信顶部导航栏的配置
-
微信顶部导航栏 => 配置文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html一般来来进行微信顶部导航栏的配置
十、tabBar底部导航菜单
tabBar
是移动端应用常见的页面效果,用于实现多页面的快速切换;小程序中通常将其分为底部 tabBar
和顶部 tabBar
tabBar文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
十一、配置 request 合法域名
微信默认只能使用内置wx.request去发起请求,在发起请求之前我们需要去进行配置
-
1.只能请求
HTTPS
类型的接口 -
2.必须将接口的域名添加到信任列表中
我们可以在官网去配置信任域名列表、或者直接在开发者工具中去设置不校验合法域名
发起get请求
发起post请求