preface

Summary of small program development, make a phone call, customize the top bar, the use of local fonts and other common functions, convenient query

First, use native fonts

Change font family in CSS;

.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;
} 
Copy the code

Two, custom transparent top bar

The top bar can transparently display the wheel cast graph and picture, this function can be completed in the single page and the total page, in json file configuration;

The top bar is transparent to display the rotation chart and pictures:"navigationStyle": "custom";
NavigationBarTitleText: Navigation bar text
NavigationBarTextStyle: Title color (Black/White)
BackgroundColor: color of the capsule button;
Other configurations: configuration of wechat applet navigation

{
  "usingComponents": {},"backgroundTextStyle": "dark"."navigationStyle": "custom"."navigationBarTitleText": "Applet title"."navigationBarTextStyle": "white"
}
Copy the code

3. Make a phone call

Apis are provided

  callPhone() {
    wx.makePhoneCall({
      phoneNumber: '18100002222'.success: function () {
        console.log('Dialed successfully')},fail: function () {
        console.log('Call failed')}})},Copy the code

4. Obtain user information

The original official provided API, but the new version of the current version, can only use the button operation! Open type=”getUserInfo” and bindGetUserInfo =”getUserInfo” to obtain user information;

<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">WeChat login</button>
Copy the code

The display page can be directly displayed using open-data, without operation save userInfo; Add: valid value of type in open-data

<view class="isLogin" >Head:<open-data type="userAvatarUrl"></open-data>WeChat name:<open-data type="userNickName"></open-data>
</view>
Copy the code

Five, dynamic setting of picture address

Bind the path to data, you can dynamically set the picture address;

 <image src="{{qrCodePath}}" mode="widthFix" />
Copy the code

Page({
 data: {
   qrCodePath: ' ',},onLoad(){
 	// Dynamically obtain the image address
 	wx:request({
		url:'http://test.json',
		success (res) {
    		console.log(res.data)
    		this.setData({qrCodePath:res.data.imgsrc})
  		}
	})
 }
})
Copy the code

Click content to clipboard and close the pop-up prompt

<view bind:tap="copeDownUrl" >Click copy content to clipboard :{{content}}</view>
Copy the code

Page({
 data: {
   content: ' ',},// Copy the link
  copeDownUrl(e) {
    let info = this.data.content
    wx.setClipboardData({
      data: info,
      success(res) {
        wx.hideToast()
        Toast(info + 'Copy succeeded, go to the browser to download')},})},})Copy the code

wx.hideToast()Turn off the native ugly popboxToast(): custom good-looking frame;
setClipboardData, copy content to clipboard;
wx:getClipboardDataTo get the contents of the clipboard, attach:The official API;

7, multiple selection and reset function: dynamic change class

Unlike native, applets cannot add or remove classes from a list by manipulating the DOM directly.

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">The reset button</button>
</view >
Copy the code

wxss

.btnItem {color:# 000}
.actived {color:red }
Copy the code

Page({
 data: {
     regionList: [{name: Jinan ' '.isSelected: false.id: 1 },
      { name: 'Qingdao'.isSelected: false.id: 2 },
      { name: 'zibo'.isSelected: false.id: 3 },
      { name: Zaozhuang ' '.isSelected: false.id: 4 },
      { name: 'in dongying.isSelected: false.id: 5 },
      { name: 'yantai'.isSelected: false.id: 6},],},regionClick(e) {
    let id = e.target.dataset.id //1. Get the current id of the click
    let index = this.data.regionList.findIndex(i= > i.id == id) //2. Select the selected index based on the id;
    this.data.regionList[index].isSelected = !this.data.regionList[index].isSelected//3. Change the value of isSelected from the selected item;
    this.setData({ regionList: this.data.regionList, })//4. Update the page data
   },
  resetRegion() {
    this.data.regionList.forEach(item= > item.isSelected = false)
    this.setData({ regionList: this.data.regionList })
  },
})
Copy the code

Analyze the above code process

The key to dynamic class is isSelected and the unique identifier ID field. The key to dynamic class is isSelected and the unique identifier ID field.

wx:for="{{ regionList }}" wx:key="id": loop list, key is id.
class="{{item.isSelected? 'actived':''}} btnItem"Class judgment, ternary expression, ifisSelected == true, is selected and increasedactivedThe style;
data-id="{{item.id}}", custom data used to determine which button is clicked after clicking;
regionClick, click select event;
resetRegion, resets the event for each item in the listisSelected Set tofalse;

Px and RPX

H5 commonly used px, REM, vw, em, small program to a RPX; Distinguish between units;

Px: pixel;
Rem: can be changed by the size of the root node HTML, default 1rem = 16px;
Vw: viewport width, dividing the screen into 100 parts, the default for the whole screen is 100VW;
RPX (Responsive Pixel) : ADAPTS to the screen width. The default screen width is 750rpx, and RPX is converted to PX (screen width /750). For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, so 750rpx = 375px = 750 physical pixels and 1rPX = 0.5px = 1 physical pixel.

Tips: In the practical application of applets, when the UI gives you a 750*1200 design, write RPX as many pixels as the caliper measures.

How to use the Vant-UI library

My favorite Ui library to use: the Vant Repep Ui library; According to the quick start can be configured; But I cannot directly use in development “van – button” : “/ path/to / @ vant weapp/dist/button/index”, the call is successful, now don’t know why, if there is who can give directions; The way I use it is to put the Vant source directly into the project and just reference it:

{
  "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": "Page"."navigationBarTextStyle": "black"
}
Copy the code

How to use custom components

Wrapping components is a necessity in today’s development, saving a lot of code; The following encapsulates a presentation list with the same style:

Create the newsList folder in the Compontents folder, which contains js/ WXSS/WXML /json files.

10.1 packaging compontents/newsList

Index. WXML, written normally according to requirements, no special requirements;

<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">Time: {{item. Time}}</view>
    </navigator>
  </view>
  <slot></slot>
</view>
Copy the code

Index. Json, setting "component": true;

{
  "usingComponents": {},
  "component": true
}
Copy the code

Index. Js, settingComponent(must),propertiesIs the value passed in when an external call is made;

// Custom components
Component({
  //
  properties: {
    infoList: {
      type: Array,}},// Life cycle, where you can get the value passed
  attached:function(){
    // console.log(this.properties);
  },
  // Own attributes
  data: {
    tagColorClass: ['colorRed'.'colorGreen'.'colorYellow',}})Copy the code

10.2 Page Invocation

json

{
  "usingComponents": {
    "van-search": ".. /.. /compontents/vant/search"."news-list":".. /.. /compontents/newsList"
  },
  "navigationBarTitleText": "Page"."navigationBarTextStyle": "black"
}
Copy the code

WXML,info-listCorresponds to the componentinfoList(Hump naming)

    <news-list info-list="{{nesList}}"></news-list>
Copy the code

Page({
 data: {
    nesList: [{title: Test title', time: '2020.0911.-2021.0918.', path: 'pages/policy-hall/policy-hall', tag: ['Shandong province city,', 'Shandong Municipal Government'], }, { title: 'Test the title2', time: '2020.0911.-2021.0918.', path: 'pages/policy-hall/policy-hall', tag: ['Shandong province city,', 'Shandong Municipal Government', 'Subject to final approval']}]}})Copy the code

conclusion

The above will complete the important ten common functions in the hair small program, basically can meet all have, if you think of it will continue to add;

Don’t forget to give me a thumbs up and a call if this article has been helpful~~O (~ ▽ ~)do Have a question leave a message over~~

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Small program: the development of wechat small program to achieve multiple selection, custom top bar and other ten important common functions

preface

First, use native fonts

Two, custom transparent top bar

3. Make a phone call

4. Obtain user information

Five, dynamic setting of picture address

Click content to clipboard and close the pop-up prompt

7, multiple selection and reset function: dynamic change class

Px and RPX

How to use the Vant-UI library

How to use custom components

10.1 packaging compontents/newsList

10.2 Page Invocation

conclusion

Small program: the development of wechat small program to achieve multiple selection, custom top bar and other ten important common functions

preface

First, use native fonts

Two, custom transparent top bar

3. Make a phone call

4. Obtain user information

Five, dynamic setting of picture address

Click content to clipboard and close the pop-up prompt

7, multiple selection and reset function: dynamic change class

Px and RPX

How to use the Vant-UI library

How to use custom components

10.1 packaging compontents/newsList

10.2 Page Invocation

conclusion

Related Posts

Introduction to the React

React Route Series – Initial routes

Pure CSS to achieve the wheel – cast graph