用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-9-21 11:36

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

前言

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

一、使用本机字体

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

结语

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏