小程序：开发微信小程序中十个重要的常见功能合集
发表时间：2021-1-5
发布人：葵宇科技
浏览次数：72
前言
总结下小程序开发中，拨打电话、自定义顶部栏、使用本机字体等常见功能整理；
一、使用本机字体
css中更改font-family；
.page{
font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,
Helvetica Neue,Helvetica,Arial,sans-serif!important;
}
二、自定义透明顶部栏
顶部栏透明可以显示轮播图及图片，这个功能在单页面和总页面都可以完成，在json文件中配置；
- 顶部栏透明可以显示轮播图及图片：
"navigationStyle": "custom"; - navigationBarTitleText：导航栏文字
- navigationBarTextStyle：标题颜色（black / white）
- backgroundColor：胶囊按钮的颜色；
- 其他配置：微信小程序导航的配置
{
"usingComponents": { },
"backgroundTextStyle": "dark",
"navigationStyle": "custom",
"navigationBarTitleText": "小程序标题",
"navigationBarTextStyle": "white"
}
三、拨打电话
官方提供了API
callPhone() {
wx.makePhoneCall({
phoneNumber: '18100002222',
success: function () {
console.log('拨打成功')
},
fail: function () {
console.log('拨打失败')
},
})
},
四、获取用户信息
原本官方提供了API，但是新版目前版本，只能用按钮操作！直接调用API不生效，设置open-type="getUserInfo"及bindgetuserinfo="getUserInfo"就可获取到用户信息；
<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">
微信登录
button>
展示页可以直接使用open-data展示，无需操作保存userInfo；
附：open-data中type 的合法值
<view class="isLogin" >
头像：<open-data type="userAvatarUrl">open-data>
微信名：<open-data type="userNickName">open-data>
view>
五、动态设置图片地址
将路径绑定到data，中即可动态设置图片地址；
<image src="{{qrCodePath}}" mode="widthFix" />
- 1
Page({
data: {
qrCodePath: '',
},
onLoad(){
//动态获取图片地址
wx:request({
url:'http://test.json',
success (res) {
console.log(res.data)
this.setData({qrCodePath:res.data.imgsrc})
}
})
}
})
六、一键内容到剪切板，并关闭弹框提示
<view bind:tap="copeDownUrl" >
点击复制内容到剪切板:{{content}}
view>
Page({
data: {
content: '',
},
// 复制链接
copeDownUrl(e) {
let info = this.data.content
wx.setClipboardData({
data: info,
success(res) {
wx.hideToast()
Toast(info + '复制成功,去浏览器下载')
},
})
},
})
wx.hideToast()关闭原生的不好看弹框，Toast()：自定义好看的弹框；setClipboardData，复制内容到剪切板；wx:getClipboardData，获取剪切板中的内容；
七、多选及重置功能：动态改变class
小程序和原生不同，在列表中不能通过直接操作dom来新增或者删除class，它的多选和vue中动态class类似，具体方法：
- wxml
<view class="btnBox">
<view span="8" wx:for="{{ regionList }}" wx:key="id">
<button bind:tap="regionClick" data-id="{{item.id}}" class="{{item.isSelected?'actived':''}} btnItem">
{{item.name}}
button>
view >
<button bind:tap="resetRegion">重置按钮button>
view >
- wxss
.btnItem {color:#000}
.actived {color:red }
- 1
- 2
- js
Page({
data: {
regionList: [
{ name: '济南', isSelected: false, id: 1 },
{ name: '青岛', isSelected: false, id: 2 },
{ name: '淄博', isSelected: false, id: 3 },
{ name: '枣庄', isSelected: false, id: 4 },
{ name: '东营', isSelected: false, id: 5 },
{ name: '烟台', isSelected: false, id: 6 },
],
},
regionClick(e) {
let id = e.target.dataset.id //1.获取点击当前的id
let index = this.data.regionList.findIndex(i => i.id == id) //2.根据id，判断出所选项的索引值；
this.data.regionList[index].isSelected = !this.data.regionList[index].isSelected//3.修改选择的item中的isSelected的值；
this.setData({ regionList: this.data.regionList, })//4.更新页面的数据
},
resetRegion() {
this.data.regionList.forEach(item => item.isSelected = false)
this.setData({ regionList: this.data.regionList })
},
})
- 分析上述代码过程
功能：循环regionList列表展示按钮，点击按钮完成选择及反选和class样式增加，点击重置按钮，取消所有选择样式，从上述代码已经可以看出，动态class的关键在于
isSelected及唯一标识符id字段；
wx:for="{{ regionList }}" wx:key="id":循环列表，key为id；class="{{item.isSelected?'actived':''}} btnItem"，class的判断，三元表达式，如果isSelected == true，则被选择，增加actived的样式；data-id="{{item.id}}"，自定义数据，用于点击后判断点击的是哪个按钮；regionClick，点击选择事件；resetRegion，重置事件，将list中每一项的isSelected设置为false；
八、px及rpx
h5中常用px，rem，vw，em，小程序来了个rpx；分辨下各自的单位；
- px：像素；
- rem ：可以根节点html的大小来改变，默认1rem = 16px；
- vw：视口宽度，将屏幕分成100份，整屏默认为100vw；
- rpx（responsive pixel）： 可以根据屏幕宽度进行自适应。默认规定屏幕宽为750rpx，rpx换算px (屏幕宽度/750)，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
tips：在小程序实际应用中，当ui给你750*1200的设计图，卡尺量出来多少px就直接写多少rpx；
九、如何使用vant-ui库
我最喜欢用的小程序Ui库：vant Weapp ui库；根据快速上手即可配置；
但我在开发中却不能直接使用"van-button": "path/to/@vant/weapp/dist/button/index"，这种调用成功，目前不知为何，如果有大佬可以指点一下；
我的使用方式是直接把vant源码放到项目中，引用即可：
{
"usingComponents": {
"van-search": "../../compontents/vant/search",
"van-toast": "../../compontents/vant/toast",
"van-row": "../../compontents/vant/row",
"van-col": "../../compontents/vant/col",
"van-icon": "../../compontents/vant/icon",
},
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff",
"navigationBarTitleText": "页面",
"navigationBarTextStyle": "black"
}
十、如何使用自定义组件
封装组件在现在的开发中很有必要的，节省很多代码；下面封装一个样式相同的展示列表：
- 在compontents文件夹中新建newsList文件夹，内部有js/wxss/wxml/json四个文件；
10.1 封装 compontents/newsList
- index.wxml，根据需求正常书写，没有特殊的要求；
<view class="container news">
<view class="tab_list_item " wx:for="{{infoList}}" wx:for-item="item" wx:key="*this">
<navigator url="{{item.path}}" hover-class="none" open-type="navigate">
<view class="tab_list_title">{{item.title}}view>
<view class="{{tagColorClass[index]}} tag" wx:for="{{item.tag}}" wx:for-item="item3" wx:key="index">
{{item3}}
view>
<view class="gt">时间：{{item.time}}view>
navigator>
view>
<slot>slot>
view>
- index.json，设置
"component": true；
{
"usingComponents": {},
"component": true
}
- index.js，设置
Component(必须)，properties中的参数为外部调用时传入的值；
// 自定义组件
Component({
//
properties: {
infoList: {
type: Array,
},
},
//生命周期，这里可以拿到传过来的值
attached:function(){
// console.log(this.properties);
},
// 自身属性
data: {
tagColorClass: ['colorRed', 'colorGreen', 'colorYellow'],
},
})
10.2 页面调用
- json
{
"usingComponents": {
"van-search": "../../compontents/vant/search",
"news-list":"../../compontents/newsList"
},
"navigationBarTitleText": "页面",
"navigationBarTextStyle": "black"
}
- wxml，
info-list对应的是组件中的infoList（驼峰命名）
<news-list info-list="{{nesList}}">news-list>
- 1
- js
Page({
data: {
nesList: [
{
title: 测试标题',
time: '2020.09.11-2021.09.18',
path: 'pages/policy-hall/policy-hall',
tag: ['山东市', '山东市市政府'],
},
{
title: '测试标题2',
time: '2020.09.11-2021.09.18',
path: 'pages/policy-hall/policy-hall',
tag: ['山东市', '山东市市政府', '以最终审批为准'],
}]
},
})
结语
以上就完成了发小程序中重要的十个常见功能，基本上能碰到的都有了，之后如果想起来会继续添加；
