Forwarding and sharing function of wechat applet

The forwarding and sharing function of wechat applet , There are two ways to do it ：

1. button Components open-type="share", After clicking the button , Will trigger Page.onShareAppMessage event .
2. Menu in the upper right corner of the page “ forward ” Button , After clicking the button , It will also trigger Page.onShareAppMessage event .

button Component's open-type=“share”

The files involved in the code are ：

1. app.json
2. pages/about/about.wxml
3. pages/about/about.wxss
4. pages/about/about.js

button Components open-type="share", Click this button , Trigger Page.onShareAppMessage event .

app.json

{
    
  "pages": [
    "pages/about/about"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/about/about.wxml

<view class="aboutContainer">
  <view class="content"> What kind of people are geeks ？ They are as wise as fools and full of scientific spirit , Natural aversion to all common sense things ; They are born to love exploration and creation , I hate following and following others ; They have their own way , Never set a restricted area for yourself ; They believe in freedom , He disdains artificial restrictions and is keen to challenge authority ; In their work, they advocate reducing complexity to simplicity , Believe in the power of design and pursue product aesthetics ……</view>
  <button open-type="share"> Click me to share </button>
</view>

pages/about/about.wxss

.content{
    
  margin: 10rpx;
  padding: 10rpx;
  text-align: justify;
  line-height: 40rpx;
  background:#eee;
  color: #1a74f1;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

pages/about/about.js

Page({
    })

The forward button in the upper right corner of the page

First , Only defined onShareAppMessage(), The menu in the upper right corner of the page will display “ forward ” Button .

then ,onShareAppMessage(Object object) Receive an object as a parameter , This object contains the following properties ：

• from, Forward event source ,string type , There are two values ：
  • "button", By clicking button Component forwarding .
  • "menu", Forward by clicking the forward menu in the upper right corner of the page .
• target, It's an object .
  • If from yes "button", be target This forwarding event is triggered button Components .
  • If from yes "menu", be target yes undefined.

Last ,onShareAppMessage(Object object) You can return an object , Used to customize the forwarding content . The returned object can contain the following properties ：

• title, Forward title , The default is the name of the current applet .
• path, Forwarding path , Must be based on / Full path at the beginning , The default is the current page path.
• imageUrl, Custom image path , It can be a local picture , You can also network pictures , The default is a snapshot of the current page .

The main files involved in the code are ：

1. app.json
2. pages/about/about.wxml
3. pages/about/about.wxss
4. pages/about/about.js
5. pages/home/home.wxml
6. pages/home/home.wxss
7. pages/home/home.js

app.json

{
    
  "pages": [
    "pages/about/about",
    "pages/home/home"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/about/about.wxml

<view class="aboutContainer">
  <view class="content"> What kind of people are geeks ？ They are as wise as fools and full of scientific spirit , Natural aversion to all common sense things ; They are born to love exploration and creation , I hate following and following others ; They have their own way , Never set a restricted area for yourself ; They believe in freedom , He disdains artificial restrictions and is keen to challenge authority ; In their work, they advocate reducing complexity to simplicity , Believe in the power of design and pursue product aesthetics ……</view>
  <button open-type="share" id="share-btn"> Click me to share </button>
</view>

pages/about/about.wxss

.content{
    
  margin: 10rpx;
  padding: 10rpx;
  text-align: justify;
  line-height: 40rpx;
  background:#eee;
  color: #1a74f1;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

pages/about/about.js

Page({
    
  onShareAppMessage({
     from,target}){
    
    console.log(from,target);
    let myObj = {
    
      title:` come from ${
      from} Forwarding ,AITO Invite you to test drive `,
      path:"/pages/home/home",
      imageUrl:"/static/images/car.jpg"
    }
    return myObj;
  }
})

pages/home/home.wxml

<view class="homeContainer">
  <view class="content" wx:for="{
     {contentList}}" wx:key="{
     {index}}">{
   {item}}</view>
</view>

pages/home/home.wxss

.homeContainer{
    
  padding: 20rpx;
}
.content{
    
  width: 100%;
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  background:#eee;
  color: #1a74f1;
  font-size: 64rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

pages/home/home.js

Page({
    
  data:{
    
    contentList:[]
  },
  onLoad(){
    
    const contentList = this.getDataFromServer();
    this.setData({
    contentList});
  },
  getDataFromServer(){
    
    let result = [" KFC house express "," Sea of clouds food "," Xibei youmian village "," East slope of Meizhou "," Wallace "];
    return result;
  }, 
  onReachBottom(){
    
    console.log("on reach bottom");
    console.log(" Pull up and touch the bottom , Get the data and append it to the list ");
    const appendData = [" other "," other "," other "," other "," other "];
    const newContentList = [...this.data.contentList,...appendData];
    this.setData({
    contentList:newContentList});
  },
  onPullDownRefresh(){
    
    console.log("on pull down refresh");
    console.log(" The drop-down refresh , Get the latest list data ");
    this.getDataFromServer();
  }
})