回复 刷新

暂无评论

小程序:开发微信小程序中十个重要的常见功能合集

前言

总结下小程序开发中,拨打电话、自定义顶部栏、使用本机字体等常见功能整理;

一、使用本机字体

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文件中配置;

顶部栏透明可以显示轮播图及图片:

  1. “navigationStyle”: “custom”;
  2. navigationBarTitleText:导航栏文字
  3. navigationBarTextStyle:标题颜色(black / white)
  4. backgroundColor:胶囊按钮的颜色;
  5. 其他配置:微信小程序导航的配置
{ "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,中即可动态设置图片地址;

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 + '复制成功,去浏览器下载') }, }) }, })
  1. wx.hideToast()关闭原生的不好看弹框, Toast():自定义好看的弹框;
  2. setClipboardData,复制内容到剪切板;
  3. 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 }

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字段;

  1. wx:for="{{ regionList }}" wx:key=“id”:循环列表,key为id;
  2. class="{{item.isSelected?‘actived’:’’}}
  3. btnItem",class的判断,三元表达式,如果isSelected == true,则被选择,增加actived的样式;
  4. data-id="{{item.id}}",自定义数据,用于点击后判断点击的是哪个按钮; regionClick,点击选择事件;
  5. resetRegion,重置事件,将list中每一项的isSelected设置为false;

八、px及rpx

h5中常用px,rem,vw,em,小程序来了个rpx;分辨下各自的单位;

  1. px:像素;
  2. rem :可以根节点html的大小来改变,默认1rem = 16px;
  3. vw:视口宽度,将屏幕分成100份,整屏默认为100vw;
  4. 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>

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: ['山东市', '山东市市政府', '以最终审批为准'], }] }, })

结语

以上就完成了发小程序中重要的十个常见功能,基本上能碰到的都有了,之后如果想起来会继续添加;

  • 52
  • 0
  • 0