前言

總結(jié)下小程序開(kāi)發(fā)中，撥打電話、自定義頂部欄、使用本機(jī)字體等常見(jiàn)功能整理；

一、使用本機(jī)字體

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;
} 

二、自定義透明頂部欄

頂部欄透明可以顯示輪播圖及圖片，這個(gè)功能在單頁(yè)面和總頁(yè)面都可以完成，在json文件中配置；

• 頂部欄透明可以顯示輪播圖及圖片："navigationStyle": "custom";
• navigationBarTitleText：導(dǎo)航欄文字
• navigationBarTextStyle：標(biāo)題顏色（black / white）
• backgroundColor：膠囊按鈕的顏色；
• 其他配置：微信小程序?qū)Ш降呐渲?/li>

{
  "usingComponents": { },
  "backgroundTextStyle": "dark",
  "navigationStyle": "custom",
  "navigationBarTitleText": "小程序標(biāo)題",
  "navigationBarTextStyle": "white"
}

三、撥打電話

官方提供了API

  callPhone() {
    wx.makePhoneCall({
      phoneNumber: '18100002222',
      success: function () {
        console.log('撥打成功')
      },
      fail: function () {
        console.log('撥打失敗')
      },
    })
  },

四、獲取用戶信息

原本官方提供了API，但是新版目前版本，只能用按鈕操作！直接調(diào)用API不生效，設(shè)置open-type="getUserInfo"及bindgetuserinfo="getUserInfo"就可獲取到用戶信息；

<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">
	微信登錄
button>

展示頁(yè)可以直接使用open-data展示，無(wú)需操作保存userInfo；
附：open-data中type 的合法值

<view class="isLogin" >
	頭像：<open-data type="userAvatarUrl">open-data>
    微信名：<open-data type="userNickName">open-data>
view>

五、動(dòng)態(tài)設(shè)置圖片地址

將路徑綁定到data，中即可動(dòng)態(tài)設(shè)置圖片地址；

 <image src="{{qrCodePath}}" mode="widthFix" />
1

Page({
 data: {
   qrCodePath: '',
 },
 onLoad(){
 	//動(dòng)態(tài)獲取圖片地址
 	wx:request({
		url:'http://test.json',
		success (res) {
    		console.log(res.data)
    		this.setData({qrCodePath:res.data.imgsrc})
  		}
	})
 }
})

六、一鍵內(nèi)容到剪切板，并關(guān)閉彈框提示

<view bind:tap="copeDownUrl" >
	點(diǎn)擊復(fù)制內(nèi)容到剪切板:{{content}}
view>

Page({
 data: {
   content: '',
 },
 // 復(fù)制鏈接
  copeDownUrl(e) {
    let info = this.data.content
    wx.setClipboardData({
      data: info,
      success(res) {
        wx.hideToast()
        Toast(info + '復(fù)制成功,去瀏覽器下載')
      },
    })
  },
})

• wx.hideToast()關(guān)閉原生的不好看彈框， Toast()：自定義好看的彈框；
• setClipboardData，復(fù)制內(nèi)容到剪切板；
• wx:getClipboardData，獲取剪切板中的內(nèi)容；

七、多選及重置功能：動(dòng)態(tài)改變class

小程序和原生不同，在列表中不能通過(guò)直接操作dom來(lái)新增或者刪除class，它的多選和vue中動(dòng)態(tài)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: '濟(jì)南', isSelected: false, id: 1 },
      { name: '青島', isSelected: false, id: 2 },
      { name: '淄博', isSelected: false, id: 3 },
      { name: '棗莊', isSelected: false, id: 4 },
      { name: '東營(yíng)', isSelected: false, id: 5 },
      { name: '煙臺(tái)', isSelected: false, id: 6 },
    ],
 },
  regionClick(e) {
    let id = e.target.dataset.id //1.獲取點(diǎn)擊當(dāng)前的id
    let index = this.data.regionList.findIndex(i => i.id == id) //2.根據(jù)id，判斷出所選項(xiàng)的索引值；
    this.data.regionList[index].isSelected = !this.data.regionList[index].isSelected//3.修改選擇的item中的isSelected的值；
    this.setData({ regionList: this.data.regionList, })//4.更新頁(yè)面的數(shù)據(jù)
   },
  resetRegion() {
    this.data.regionList.forEach(item => item.isSelected = false)
    this.setData({ regionList: this.data.regionList })
  },
})

• 分析上述代碼過(guò)程

功能：循環(huán)regionList列表展示按鈕，點(diǎn)擊按鈕完成選擇及反選和class樣式增加，點(diǎn)擊重置按鈕，取消所有選擇樣式，從上述代碼已經(jīng)可以看出，動(dòng)態(tài)class的關(guān)鍵在于isSelected及唯一標(biāo)識(shí)符id字段；

• wx:for="{{ regionList }}" wx:key="id":循環(huán)列表，key為id；
• class="{{item.isSelected?'actived':''}} btnItem"，class的判斷，三元表達(dá)式，如果isSelected == true，則被選擇，增加actived的樣式；
• data-id="{{item.id}}"，自定義數(shù)據(jù)，用于點(diǎn)擊后判斷點(diǎn)擊的是哪個(gè)按鈕；
• regionClick，點(diǎn)擊選擇事件；
• resetRegion，重置事件，將list中每一項(xiàng)的isSelected設(shè)置為false；

八、px及rpx

h5中常用px，rem，vw，em，小程序來(lái)了個(gè)rpx；分辨下各自的單位；

• px：像素；
• rem ：可以根節(jié)點(diǎn)html的大小來(lái)改變，默認(rèn)1rem = 16px；
• vw：視口寬度，將屏幕分成100份，整屏默認(rèn)為100vw；
• rpx（responsive pixel）： 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。默認(rèn)規(guī)定屏幕寬為750rpx，rpx換算px (屏幕寬度/750)，如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

tips：在小程序?qū)嶋H應(yīng)用中，當(dāng)ui給你750*1200的設(shè)計(jì)圖，卡尺量出來(lái)多少px就直接寫(xiě)多少rpx；

九、如何使用vant-ui庫(kù)

我最喜歡用的小程序Ui庫(kù)：vant Weapp ui庫(kù)；根據(jù)快速上手即可配置；
但我在開(kāi)發(fā)中卻不能直接使用"van-button": "path/to/@vant/weapp/dist/button/index"，這種調(diào)用成功，目前不知為何，如果有大佬可以指點(diǎn)一下；
我的使用方式是直接把vant源碼放到項(xiàng)目中，引用即可：

{
  "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": "頁(yè)面",
  "navigationBarTextStyle": "black"
}

十、如何使用自定義組件

封裝組件在現(xiàn)在的開(kāi)發(fā)中很有必要的，節(jié)省很多代碼；下面封裝一個(gè)樣式相同的展示列表：

• 在compontents文件夾中新建newsList文件夾，內(nèi)部有js/wxss/wxml/json四個(gè)文件；

10.1 封裝 compontents/newsList

• index.wxml，根據(jù)需求正常書(shū)寫(xiě)，沒(méi)有特殊的要求；

<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">時(shí)間：{{item.time}}view>
    navigator>
  view>
  <slot>slot>
view>

• index.json，設(shè)置"component": true；

{
  "usingComponents": {},
  "component": true
}

• index.js，設(shè)置Component(必須)，properties中的參數(shù)為外部調(diào)用時(shí)傳入的值；

// 自定義組件
Component({
  //
  properties: {
    infoList: {
      type: Array,
    },
  },
	//生命周期，這里可以拿到傳過(guò)來(lái)的值
  attached:function(){
    // console.log(this.properties);
  },
  // 自身屬性
  data: {
    tagColorClass: ['colorRed', 'colorGreen', 'colorYellow'],
  },
})

10.2 頁(yè)面調(diào)用

• json

{
  "usingComponents": {
    "van-search": "../../compontents/vant/search",
    "news-list":"../../compontents/newsList"
  },
  "navigationBarTitleText": "頁(yè)面",
  "navigationBarTextStyle": "black"
}

• wxml，info-list對(duì)應(yīng)的是組件中的infoList（駝峰命名）

    <news-list info-list="{{nesList}}">news-list>
1

• js

Page({
 data: {
    nesList: [
      {
        title: 測(cè)試標(biāo)題',
        time: '2020.09.11-2021.09.18',
        path: 'pages/policy-hall/policy-hall',
        tag: ['山東市', '山東市市政府'],
      },
      {
        title: '測(cè)試標(biāo)題2',
        time: '2020.09.11-2021.09.18',
        path: 'pages/policy-hall/policy-hall',
        tag: ['山東市', '山東市市政府', '以最終審批為準(zhǔn)'],
      }]
 },
})

結(jié)語(yǔ)

以上就完成了發(fā)小程序中重要的十個(gè)常見(jiàn)功能，基本上能碰到的都有了，之后如果想起來(lái)會(huì)繼續(xù)添加；