微信小程序开发的基本用法
1、数组或对象的遍历
1.1、数组遍历
- wx:for=”{{数组或对象}}” wx:for-item=”循环项的名称” wx:for-index=”循环项的索引” wx:key=”唯一的值”用来标识数据的唯一性。
- 微信小程序的数组遍历的循环项的的名称和索引自动默认是item和index,所以在单层循环时不用特地声明;然而在嵌套数组时要进行声明,并定义不同的循环项。
1.2、对象遍历
- 对象的遍历为了与数组的遍历进行区别,
wx:for-item=“value”wx:for-index=”key”
2、条件渲染
2.1、wx:if
- 用法:wx:if(wx:if…….wx:elif…….wx:else……) wx:if=”{{布尔值或变量}}”主要是将dom元素移除或添加
2.2 、hidden
- 用法:hidden=”{{布尔值或变量}}”,主要是设置dom元素的display属性
3、小程序的事件绑定
3.1、bindinput
- 用法:bindinput=”方法名”,这个方法是在js文件中和data同级的,如果要实现数据绑定,则在方法中要使用setData,如下所示,num是data中的数据
handle(e){
console.log(e)
this.setData({
num:e.detail.value
})
},
})
3.2、bindTap
- 如果要实现简单的点击操作,则要借用自定义属性,wxml中如下
<button bindtap="handleOne" data-number = '{{1}}'>+</button>
<button bindtap="handleOne" data-number = '{{-1}}'>-</button>
- js文件中如下
handleOne(e){
console.log(e)
// const number = Number(e.currentTarget.dataset.number)//如果data-number中的数据没有被{{}}包括,则这里需要Number函数将其转换成数字类型的
const number = e.currentTarget.dataset.number
this.setData({
num:this.data.num + number
})
}
4、rpx
- 为了更好的兼容各类机型的手机,微信小程序引入了rpx,所以在微信小程序中我们要将px经过换算,转换成rpx。假设设计稿宽page
- 1px = 750rpx/page //这里其实是算出了这个比率
- 转换之后的宽 = 宽 * 759rpx/page //用像素的宽乘以比率
- 但在实际操作中不能直接写,要借用calc这个属性,且运算符两边不能有空格。如下所示
width:calc(750rpx*100/375)
5、样式导入
- 使用
@import
导入外联样式表,且只支持相对路径。通常是针对一些公共样式。 - 具体写法是在page同级创建style文件夹,在文件夹下创建wxss文件,之后在需要的wxss文件引入。做法如下
@import "../../style/common.wxss";
6、选择器
- 微信小程序的选择器不支持通配符*。原生的微信小程序是不支持less,所以要在vscode上安装插件easy less,然后在vscode设置中写入
"less.compile": {
"outExt": ".wxss"
},
- less中不支持calc,所以在less文件中使用calc,要像如下写法,运算符号两边是要加空格的
height: ~'calc(100vh - 90rpx)';
7、常见组件
7.1、 view
- 代替以前的div标签
7.2、 text
- 文本标签,类似之前的span标签。
- 只能嵌套text
- 可以实现长按文本复制(只有这个标签有这个功能,当标签加上selectable属性时,具备此功能)
- 可对空格、回车进行解码(标签加上decode属性)
7.3、 image
- src:图片加载路径
- 它有一个默认宽高320*240
- mode:决定图片内容如何与图片标签宽高进行适配
- scaleToFill:默认值,不保持纵横比,直接拉伸
- aspectFit:保持纵横比,且长边完全显示,进行缩放。(一般做轮播图的时候使用)
- aspectFill:保持纵横比,且使短边完全显示。
- widthFix:宽度不变(即宽度指定后),高度自适应
…其他
- 小程序的图片是直接支持懒加载的,直接在标签上加上lazy-load属性就可以了
7.4 、 swiper轮播组件
- 轮播图外层容器swiper,轮播项swipter-item
- swiper标签存在默认值:宽100%,高150px。无法实现由内容撑开。
- 为了使页面美观,我们要通过计算得出swiper的高。swiper的宽/swiper的高 = 图片的宽/图片的高
7.4.1、常见属性
- autoplay:swiper标签的属性,自动轮播
- interval:swiper标签属性,定时轮播,默认值是5000
- circular:siper,循环轮播
- indicator-dots:指示点导航,指示器、分页器
- indicator-color:指示器的颜色。
- indicator-active-color:指示器激活时的颜色
7.5 、navigator
-
块级元素,是自动换行,可以添加高度和宽度
-
常见属性
url:要跳转的页面路径,相对路径或绝对路径 target:是跳转当前小程序内还是别的小程序。默认值是self,其他小程序是miniProgram open-type:打开方式 navigate:默认值,保留当前页面,跳转到小程序内其他页面,但不能跳转到tabbar页面 redirect:关闭当前页面,跳转到小程序内其他页面,但不能跳转到tabbar页面 switchTab:跳转到tabbar页面,并关闭非tabbar页面 reLaunch:关闭所有页面,跳转到小程序内其他页面 ......
7.6、rich-text富文本标签
- nodes属性接收字符串或对象数组,字符串是data中的html代码,它可以进行解析
7 .7、 button
7.7.1、外观属性
- size:按钮尺寸
- default:默认值
- mini:小按钮
- type:按钮颜色
- primary:绿色
- default:灰色
- warn:红色
- plain:按钮是否镂空,颜色透明(布尔类型)
- loading:是否等待(布尔类型)
7.7.2、开发能力
- open-type值如下
- contact:打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,需要微信小程序的后台配置。只能通过真机调试看到效果
- share:触发用户转发,转发当前小程序到微信朋友中,不能分享到朋友圈
- getPhoneNumber:获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息
- 1、绑定一个事件bindgetphonenumber
- 2、在回调函数中,通过参数获取信息
- 3、获取到的信息是已经加密过的。需要用户自己搭建小程序的后台服务器,在服务器中进行解析,然后再返回小程序中
- getUserInfo:获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
- 1、使用方法和getPhoneNumber类似
- 2、获取的信息是可以直接看到的,不存在加密字段的
- launchApp:打开APP,可以通过app-parameter属性设定向APP传的参数具体说明
- openSetting:打开授权设置页
- 1、授权页面中,只会出现用户曾经点击过的权限
- feedback:打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。只能通过真机调试看到效果
7.8、 icon
- type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download,search, clear
- size:icon的大小
- color:icon的颜色,同css的color
7.9、 radio
- 1、必须与radio-group结合使用
- 2、value是所选中的值
- 3、需要给radio-group绑定事件,来获取选中的值,通过bindchange绑定
- 4、可以在radio加上color属性,变换radio的选中颜色
- 用法如下:
<radio-group bindchange="handleChange">
<radio color="yellow" value="male" >男</radio>
<radio color="yellow" value="female">女</radio>
</radio-group>
<view>您选中的是:{{gender}}</view>
7.10、 checkbox
- 1、用法与radio类似
- 用法如下:
<checkbox-group bindchange="checkChange">
<checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">
{{item.name}}
</checkbox>
</checkbox-group>
<view>您选择是:{{checkList}}</view>
8、自定义组件
- 1、创建组件,在page同级创建自定义组件
- 2、在需要的页面的json文件中声明组件,在wxml文件中引入
"usingComponents": {
"Tabs":"../../component/Tabs/Tabs"
}
- 3、父传子
- 父组件
<Tabs list="{{list}}"></Tabs>
- 子组件
- 先在js文件中,然后就可以直接使用list了,如果要修改传值的内容,则要通过派发事件到父组件进行处理
properties: { list:{ type:Array,//传值的类型 value:''//默认值 } },
- 父组件
- 4、子传父
this.triggerEvent("父组件自定义事件名称",要传递的参数)
- 子组件
handle(e){ const {index} = e.currentTarget.dataset this.triggerEvent("itemChange",index) }
- 父组件wxml文件
<Tabs list="{{list}}" binditemChange="itemChange"></Tabs>
- 子组件
9、小程序的生命周期
9.1 应用生命周期
- 1、onLaunch:应用第一次启动会触发的事件,主要用于获取用户信息
- 2、onShow:应用被用户看到,对应用的数据或页面效果 重置
- 3、onHide:应用被隐藏,暂停或消除定时器
- 4、onError:应用代码发生错误,就会触发。触发后,收集用户信息,通过异步请求,将错误信息发送后台,针对错误信息,更新应用
- 5、onPageNotFound:页面不存在时,触发
9.2 页面生命周期
- 1、onLoad:监听页面加载。发送一些异步请求,初始化页面数据
- 2、onShow:页面显示。
- 3、onReady:页面渲染完毕
- 4、onHide:页面隐藏
- 5、onUnLoad:页面卸载触发。关闭当前页面时触发
- 6、onPullDownRefresh:下拉刷新触发。用于刷新数据或页面效果(wx.stopPullDownRefresh()关闭下拉刷新窗口)
- 7、onReachBottom:上拉触底触发。上拉加载下一页数据
- 8、onShareAppMessage:用户点击右上角分享时触发
- 9、onPageScroll:页面滚动就触发。
- 10、onResize:页面尺寸变化时触发,横竖屏切换时触发
- 11、onTabItemTap:当前是tabbar页面且点击当前tab item时触发
10、小程序的第三方框架
- 1、腾讯的wepy 类似vue
- 2、美团:mpvue 类似vue
- 3、京东:taro 类似 react
- 4、滴滴:chameleon
- 5、uni-app 类似 vue
- 6、原生框架 MINA
11、接口请求数据
wx.var reqTask = wx.request({
url: '', // 异步请求的地址
data: {}, //要给后台发送什么数据,需要的时候加上,不需要可以删除
header: {'content-type':'application/json'}, //请求头,是有默认值的
method: 'GET', //请求的方法,默认的,除了GET外,还有POST、PUT、DELETE
dataType: 'json', //你想要的返回值的类型,也有默认值
responseType: 'text', //返回文本的类型
success: (result)=>{ //成功的回调函数
},
fail: ()=>{}, //失败的回调函数
complete: ()=>{} //无论成功还是失败都会调用的回调函数
});
},
12、wx中比较常用的自带的api
- wx.stopPullDownRefresh():关闭下拉刷新的窗口
- wx.showToast({title:"",…}):提示工具,相当于alert、confirm等
- wx.showLoading({title:“加载中”,mask:true//是否显示蒙版})开启,wx.hideLoading()关闭加载中的显示
- wx.previewImage({…})预览图片
- wx.chooseAddress():获取收货地址
- wx.getSetting({…})获取用户权限
- wx.openStting({…})打开用户权限
13、css技巧
- 实现省略号
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;