微信小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

小程序开发文档(*)

小程序开发文档

搭建微信小程序项目

注册小程序+创建小程序项目

app.json

根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

tips: 配置文件中不识别单引号，使用单引号会报错(因为是json文件)

[1]配置页面路由-pages

pages配置用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

语法如下：

 "pages": [
    "pages/index/index", // index页面
    "pages/logs/logs" // logs页面
  ],

小程序中新增/减少页面，都需要对 pages 数组进行修改。

[2]配置默认启动页

若是想配置默认启动页面，可以在全局配置中找到entryPagePath中去查看如何配置；

该配置指定小程序的默认启动路径(首页)，常见情景是从微信聊天列表页下拉启动、小程序列表启动等。

语法如下：

"entryPagePath":"pages/logs/logs" // 小程序打开跳转到日志页面

若是没有配置该配置项则默认pages列表第一项为启动路径。tips:不支持带页面路径参数.

[3]全局默认窗口配置

若是想修改窗口配置，在全局配置中找到window配置，去查看其配置项进行修改；

该配置用于设置小程序的状态栏、导航条、标题、窗口背景色；

"window": {
    // [1]navigationBarXXX 都是有关于导航栏的
    "navigationBarBackgroundColor": "#354559",  // 导航栏背景颜色,仅支持16进制颜色
    "navigationBarTitleText": "英雄列表", // 导航栏标题文字内容(其位置是由手机型号决定的-显示在左边还是中间)
    "navigationBarTextStyle": "white", // 导航栏标题颜色
    
    // [2]onReachBottomDistance 设置页面上拉触底事件触发时距页面底部距离
    "onReachBottomDistance":50 , // 当底部距离>=50时会触发触底事件

    // [3]enablePullDownRefresh 是否开启全局的下拉刷新。
    "enablePullDownRefresh":true

    // [4]backgroundXXX 都是配置下拉后的背景样式
    "backgroundColor": "#ddd" ,// 下拉的背景颜色
	"backgroundTextStyle":"light" // 下拉dot的颜色
详见
  },

举例说明1：

创建一个小程序，小程序默认的窗口样式如上，而我想配置一个如下的窗口

"window": {
    "navigationBarBackgroundColor": "#354559",  // 导航栏背景颜色,仅支持16进制颜色
    "navigationBarTitleText": "英雄列表", // 导航栏标题文字内容(其位置是由手机型号决定的-显示在左边还是中间)
    "navigationBarTextStyle": "white" // 导航栏标题颜色
  },

[4]底部导航栏配置

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 全局配置tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面；

举例说明：配置一个如上图所示的导航栏

 "tabBar":{
    "color":"#353535",  
    "selectedColor":"#eb4450",
    "backgroundColor":"#ffffff",
    "borderStyle":"black",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"/static/tabs/[email protected]",
        "selectedIconPath":"./static/tabs/[email protected]"
      },
      {
        "pagePath":"pages/classify/classify",
        "text":"分类",
        "iconPath":"/static/tabs/[email protected]",
        "selectedIconPath":"./static/tabs/[email protected]"
      },
      {
        "pagePath":"pages/shoppingCar/shoppingCar",
        "text":"购物车",
        "iconPath":"/static/tabs/[email protected]",
        "selectedIconPath":"./static/tabs/[email protected]"
      },
      {
        "pagePath":"pages/userInfo/userInfo",
        "text":"购物车",
        "iconPath":"/static/tabs/[email protected]",
        "selectedIconPath":"./static/tabs/[email protected]"
      }
    ]
  },

wxml

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

组件

小程序开发文档组件目录
在微信小程序开发过程中，使用的是微信小程序内置组件进行结构开发，微信小程序是不支持原生html标签的(与原生html标签不兼容)。
我们可以在微信小程序开发文档->组件下进行查看有哪些组件和组件的具体使用。
常用的组件如下

组件	说明
	最外层的标签(类似与html的body)
	块元素(类似于html中的div)
	行内元素(类似于html中的span)
	一些字体图标
	行内块元素(类似于html中的img)
	行内块元素(类似于html中的button)
	类似于html中的a标签
	轮播图
	进度条
	输入框-单标签(必须写结尾符)

组件-icon

组件->基础内容->icon

<icon type='search' size='16'>icon>

组件-image

image的mode属性，可以规定图片的裁剪方式

• scaleToFill不保持纵横比，短边拉伸（默认）
• aspectFit 保持纵横比，长边显示，短边留空
• aspectFill保持纵横比，短边显示，长边截取
• widthFix保持纵横比,宽度不变，高度自动变化
  

组件-button

button组件的 open-type属性让按钮可以分享、打开客服聊天、获取用户信息、获取用户手机号等的能力；

分享

  
  <button open-type='share'>

打开客户聊天框

  
  <button open-type="contact">客服button>

获取用户信息

<button open-type="getUserInfo" @getuserinfo.stop="getuserInfo">获取用户信息button>

组件-swiper

视图容器->swiper
swiper组件的作用是用户轮播图，在这里可以配置是否显示面板指示点、指示点的颜色、是否自动切换、当前所在滑块的 index、自动切换时间间隔、滑动动画时长、滑动为纵向/横向、前边距、后边距等。
swiper默认的宽高为320*150；

<swiper indicator-dots autoplay :interval="3000" :duration="1000">
	<swiper-item>
		<view class="swiper-item">
			<image src="//gw.alicdn.com/tps/O1CN017olehF1wvVgqrOD9g_!!6000000006370-0-yinhe.jpg_290x10000Q75.jpg" mode=""></image>
		</view>
	</swiper-item>
	<swiper-item>
		<view class="swiper-item">
			<image src="//gw.alicdn.com/tps/O1CN017olehF1wvVgqrOD9g_!!6000000006370-0-yinhe.jpg_290x10000Q75.jpg" mode=""></image>
		</view>
	</swiper-item>
</swiper>

组件-navigator

组件->导航->navigator
在使用navigator进行导航时可以配置是否在当前小程序进行跳转、跳转的目标连接等。

组件-input

组件->表单组件->input

   
   {{value}}
  '111' bindinput="valuechange"/>

valuechange(e){
    this.setData({value:e.detail.value})
  },

input常用事件

• input 表单值改变事件
• confirm 点击键盘右下角按钮时触发
• blur 失去焦点时触发

在微信小程序中的input仅仅用作输入框，没有原生html标签可以当作文件上传、单选、多选、按钮等。
input的type属性(表示键盘类型)值

• text：普通键盘
• number：数字键盘
• idcard：身份证键盘(比数字键盘多一个X)

confirm-type属性可以规定右下角按钮的文本，比如搜索、保存等；

组件-rich-text

组件->基础内容->rich-text
富文本编辑，支持将node节点或html字符渲染为dom结构。
注：虽然在微信小程序中不能够使用html的原生标签，但是在该组件中可以接受传递一些可信任的html标签

  
  <rich-text nodes=' style="color:#f00">111111</div>'>rich-text>

语法

wxml的语法可以在小程序开发文档->框架->WXML语法参考里面去详细阅读。

数据绑定

在某些需求中，我们需要将js中的数据动态渲染到页面上,可以使用{{}}双胡子语法。WXML 中的动态数据均来自对应 Page 的 data对象中。

[1]内容数据绑定

如果是在标签间使用动态数据，直接写在{{}}之间即可；
举例说明-动态渲染name属性值

<view>大家好，我是{{name}}view>

Page({
  // 存放有关页面的数据
  data: {
    name:'渣渣辉'
  }
})

[2]属性数据绑定

在使用vue时，若是原生html标签想要进行数据绑定需要通过v-blind指令进行(原因是因为原生html标签不能使用vue实例化对象的数据)；
wxml中的组件内部就是可以识别data中的数据的，因此vxml在属性中进行数据绑定也是直接写在{{}}中即可。
举例说明-样式动态渲染

<view class='{{styleclass}}'>大家好，我是{{name}}view>

 data: {
    name:'渣渣辉',
    styleclass:'redBox'
  },

[3]关键字

关键字需要使用{{}}语法，不然默认会被识别为字符串

<checkbox checked="{{false}}"> </checkbox>

[4] {{}}支持运算
在双胡子语法中，支持

• 数组、对象语法；
• 二元运算、三元运算；
• 逻辑判断；

<view class='{{styleclass ? "redBox" : null}}'>
  <view>大家好，我是{{name}}view>
  
  <text>1+1={{1+1}}text>
  
  <view wx:for='{{[1,2,3]}}'>
    {{item}}
  view>
view>

 data: {
    name:'渣渣辉',
    styleclass:true
  },

列表渲染

(1)语法

// 默认的元素变量名为item 默认的索引变量民为index
wx:for='数组'

// 若是数组写在data里面需要使用 数据绑定({{}})
wx:for='{{arr}}'
// 若是我们直接写一个数组，需要使用数据绑定({{}})进行识别，不然默认会被当作是字符串
wx.for='{{[1,2,3]}}'

// 若是不想使用默认的变量名item作为元素，需要使用以下语法进行修改
wx:for-item='值'
// 若是不想使用默认的变量名index作为元素索引，需要使用以下语法进行修改
wx:for-index='值'

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key='值' // 需要保证key值唯一

(2)举例说明

<view>
  <view wx:for='{{arr}}' wx:for-item='arrItem' wx:for-index='arrIndex' wx:key='arrItem.id'>
    {{arrIndex}}-{{arrItem.name}}
  view>
view>

data: {
    arr:[
      {
        id:1,
        name:'水果'
      },
      {
        id:2,
        name:'蔬菜'
      },
      {
        id:3,
        name:'零食'
      },
      {
        id:4,
        name:'垃圾食品'
      }
    ]
  },

条件渲染

(1)语法

 wx:if='条件'
 wx:else-if='条件'
 wx:else

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

导入导出

在小程序js文件中可以使用es6模块化的导入导出来导入/导出文件。

事件

在小程序开发文档->指南->视图层->事件系统中详细介绍了事件

事件中的this

小程序中的 this 指向就的当前小程序页面实例,我们可以通过this获取data数据中的数据或实例中的方法

wxss

wxss与css的使用基本一致。

单位rpx

在小程序中是如何进行页面适配的呢？
在默认情况下会将小程序中所有页面(无论屏幕大小)都会分为750份，每一份占比为1rpx;
也就是说若是我们的设计图为750px时 1px=1rpx;若是我们的设计图为350px时 2px=1rpx;

• 在写宽高等需要适配的样式时推荐使用单位rpx(自动适配);
• 若是某些情况下不需要适配如font-size则可直接写单位px(不自动适配)；

wx中的js

在wx中一个页面的js文件的基本结构如下,具体配置可以在小程序开发文档->框架->框架接口->页面->page查看具体配置

Page({

  // 存放有关页面的数据
  data: {

  },
  
  // 页面绑定的时间函数，如fn
  fn(){
   
  }

  // 生命周期函数--监听页面加载
  onLoad(options) {

  },

  // 生命周期函数--监听页面初次渲染完成
  onReady() {

  },

  // 生命周期函数--监听页面显示
  onShow() {

  },

  // 生命周期函数--监听页面隐藏
  onHide() {

  },

  // 生命周期函数--监听页面卸载
  onUnload() {

  },

  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {

  },

  // 页面上拉触底事件的处理函数
  onReachBottom() {

  },

  // 用户点击右上角分享
  onShareAppMessage() {

  }
})

data

AppData

我们可以在微信开发者工具->调试器->AppData中可以看到当前页面的data属性，也可以改

获取/修改data中的数据

[1]获取data中的数据
我们在vue中是直接使用 this.data对象中的属性名 就可以获取到data中的数据了(原因是vue将data与methods中的数据平铺在了实例化对象的身上)；
而在小程序中，若是我们想要获取data中的数据需要使用this.data.data中属性来获取；
[2]修改data中的数据

<view>
  <text>{{name}}text>
  <button bindtap="editname">editbutton>
view>

data: {
    name:'渣渣辉'
  },
  editname(){
    this.data.name='chaochao'
    console.log('name', this.data.name)
  },

如上述代码，当点击edit按钮时，我们发现页面上依旧显示的是 “渣渣辉”，而控制台打印的为 “chaochao”;
也就是说通过 点语法 直接修改 data对象中的属性是没有办法将其重新渲染在视图上的；
我们会通过this.setData({data属性名:属性值})的方式修改数据，这样数据修改完毕不需要操作dom，会自动更新视图；

小程序(APP)的生命周期

指南->小程序框架->框架接口->小程序App
小程序的生命周期在入口文件中进行配置。

onLaunch

生命周期回调——监听小程序初始化

onShow

生命周期回调——监听小程序启动或切前台

场景值

我们开发一个小程序之后，用户是通过什么样的方式进入小程序的呢？

我们可以看到会有以上甚至更多中方式，每种方式都有一个编号，比如手机相册选取二维码为2003。
这种编号就叫做场景值。
在小程序·生命周期的onShow函数中可以获取场景值

onShow: function(option) {
	console.log('App Show',option.scene) // 1001
},

可以进行事件上报

• pv是指页面一天被访问的量；
• uv是指页面一天被多少人访问；

onHide

生命周期回调——监听小程序切后台

page的生命周期函数

指南->小程序框架->框架接口->页面->page

onLoad

• 执行时机：页面加载时触发(相当于created),一个页面只会调用一次;
• 应用场景：
  • (1) 进行页面跳转时，可以在 onLoad中获取打开当前页面路径中的参数;
  • (2) 可以在onLoad中发送请求获取(对实时性要求不高)数据
• 注意点：onLoad函数在一个页面只会调用一次，当进行页面切换时不会重新走onLoad生命周期函数。但是若是使用了redirectTo方法跳转页面或使用navigateBack离开页面，再次进入页面就会调用 onLoad生命周期函数。
  • 原因：使用redirectTo、navigateBack都会关闭当前页面再进行跳转，而使用navigateTo会保留当前页面并进行跳转。

onShow

• 执行时机：页面显示/切入前台时触发(每一次页面显示都会触发)；
• 应用场景：若是数据对实时性要求特别高可以在onShow函数中获取；

onReady

• 执行时机：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• 注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

onHide

• 执行时机：页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等；
• 应用场景：在页面隐藏时阻止异步设置配置影响其他页面

onUnload

• 执行时机：页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时；

事件处理函数

onReachBottom

监听用户上拉触底事件(用于做上拉加载更多)。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次

举例说明
[1]在页面配置中配置触底距离

{
  "navigationBarTitleText": "搜索列表",
  "onReachBottomDistance":50
}

[2]触底之后做处理

onReachBottom(){
	// 下拉触底事件-在距离<50时触发
	this.pagenum++
	this.getList()
},

[3]问题
在下拉刷新过程中如果接口返回的数据比较慢，那么可能会在下滑过程中同时发起多个请求
[4]解决1-Loading提示时禁止滑动
在发送请求时添加一个 数据加载loading

wx.showLoading({
	title: '数据加载中...',
	mask:true // 添加遮罩层，防止触摸穿透
})

这样若是处于加载数据过程中，用户就无法继续下拉刷新；
[4]缺点
通过上述处理确实可以解决问题，但是若是接口很慢，用户长时间无法滑动屏幕，会认为页面处于卡死状态，对于用户的体验是非常不友好的；
[5]解决
我们可以使用 开关思想.

• 在data属性中: isRequesting （ 是否在请求中）
• 请求开始前，判断isRequesting的值，若是为false则发送请求，否则return
• 请求开始，将 isRequesting:设置 为请求中 true
• 请求结束，将 isRequesting:设置为请求结束 false

// 下拉触底事件-在距离<50时触发
onReachBottom(){
	// 只有没有发送请求时才将页码加1重新发送请求
	if(this.isRequesting){
	  return
    }
	this.pagenum++
	this.getList()
	},

onPullDownRefresh

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

举例说明
[1]在页面配置项中进行配置，开始当前页的刷新

{
	"navigationBarTitleText": "搜索列表",
	"onReachBottomDistance":50,
	"enablePullDownRefresh":true
}

[2]监听刷新事件，做处理

async onPullDownRefresh(){
			// 上拉刷新事件-将数据重置，重新获取列表
			this.pagenum = 1
			this.list = []
			this.total = undefined
			console.log('重置-重新获取列表')
			await this.getList()
			wx.stopPullDownRefresh() // 获取数据后关闭刷新
},

[3]在列表一般会将搜索框固定在最上方，而我们又需要做下拉刷新时可以使用粘性定位(使用固定定位的话，会遮住下拉刷新的样式).

onPageScroll

框架->页面->page
作用：监听用户滑动页面事件
在参数中可以获取页面的滚动距离scrollTop

api

(1)交互

Loading提示

• 页面loading提示在小程序开发文档->ApI->界面->交互中查看；

  • wx.showLoading({
    title: ‘数据加载中…’,
    })

  • wx.hideLoading()

• 导航栏loading提示在小程序开发文档->ApI->界面->导航栏中查看；

  • wx.showNavigationBarLoading()

  • wx.hideNavigationBarLoading()

提示

wx.showToast的作用是显示消息提示框

对话框提示

wx.showModal的作用是显示模态对话框
注意：无论用户点击取消还是确定都会走success方法

• res.confirm为true表示用户点击确定
• res.cancel为true表示用户点击取消

(2)发送网络请求

wx-request

小程序开发文档->ApI->网络->wx-request

wx.request({
	url:'路经',
	data:{
	  // 即可传入get请求的数据又可传入post请求的数据
	},
	header：{
	  // 请求头设置
    },
    method:'GET', // 请求方式
	success(res){
	  // 成功的回调
	  console.log('res',res)
   },
   	fail(err){
   	  // 失败的回调
   	}，
   	complete(){
   	 // 完成的回调
   	}
})

通过上述代码发送了一个小程序的request请求，发现报了一个如下错误

因此在发送请求之前需要将该请求配置为合法域名(添加在白名单中)

设置合法域名

配置说明
小程序只可以跟指定的域名进行网络通信,也就是说我们要发送请求之前需要先将请求的域名配置为一个小程序认为的合法域名(添加在当前小程序域名白名单中)。
在小程序后台->开发管理->开法设置->服务器域名中进行配置。

配置之后该域名的请求就可以在当前小程序中正确调用了。

请求封装

[1]封装一个请求函数

const baseUrl ='xxx'
function request({url,method='GET',data={},header={}}){
	// 小程序返回的结果并不是一个Promise，我们封装一个Promise结果并返回
	return new Promise((resolve,reject) => {
	    // 加载请求时配置loading
		wx.showNavigationBarLoading()
		wx.showLoading({
		  title: '数据加载中...',
		})
		wx.request({
			url：baseUrl+url,
			method,
			data,
			header,
			success(res){
				resolve(res)
			},
			fail(err){
				reject(err)
			},
			complete(){
				wx.hideNavigationBarLoading()
				wx.hideLoading()
			}
		})
	})
}
export default request

[2]全局配置

import App from './App'
import request from 'utils/index.js'
// 将其挂载到Vue的原型对象上
Vue.prototype.$axios = request

[3]在页面中使用

onLoad() {
	this.getSwiperArr()
},
methods: {
  async getSwiperArr(){
	 const res =await this.$axios({url:'home/swiperdata'})
	 console.log('res',res)
  }
}

(3)路由跳转

wx.navigateTo

API->路由->微信.navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

页面栈

在小程序中所有打开的过页面，都会被放到一个单独的空间中的，这个空间叫做页面栈；
我们可以通过调试台中APPData中去观察；
通过getCurrentPages方法可以获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
注意：在页面栈中保留的页面会保留当前页面的状态(相当于keep-alive)，因此若是我们需要再次打开页面时清空页面中的某些数据时可以在onHide或onShow中处理。

错误-路径问题

现在要进行一个路由跳转，代码如下

wx.navigateTo({url:`pages/searchList/searchList?key=${key}`})

但是发现没有实现跳转但是也没有报错，原因是路径错误跳转的错误会体现在fail函数中，若是我们没有写fail函数时则不会暴露出来

wx.navigateTo({
	url:`pages/searchList/searchList?key=${key}`,
	fail: function(err){
		 console.log('err',err)
	 }
})

将错误暴露出来后，发现在路由跳转的时候配置的路经并不是在pages中配置的路经； 而是一个一个相对地址。
比如说路经如下

├── info
    ├── index.vue
├── searchList
    ├── index.vue

若是我们的url直接写pages里面配置的路经，那么就会报错

errMsg: “navigateTo:fail page “pages/info/pages/searchList/searchList?key=%E6%9B%B2%E9%9D%A2%E7%94%B5%E8%A7%86” is not found”

正确配置的url应该是

// 相对路径
wx.navigateTo({url:`../../pages/searchList/searchList?key=${key}`})

// 相对于 根目录 的绝对路经
wx.navigateTo({url:`./pages/searchList/searchList?key=${key}`})

wx.redirectTo

API->路由->wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层;
注：点击导航栏左侧"<"和方法wx.navigateBack()效果一样。

wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面;
注意：

• 若是配置了tabBar->小程序启动后，只会初始化第一个tabbar页面; 其他tabbar页面，第一次切换才会初始化；
• tabbar只要初始化了，后续切换tabbar不会销毁，只会显示/隐藏（onShow/onHide）
• 同一时间只有一个tabbar页面会入栈

(4)分享

在使用小程序的时候，经常会使用右上角的分享功能，今天自己做一个小程序点击右上角发现分享功能不可用

提示说是当前页面未设置分享；
原因是因为当前页面没有添加onShareAppMessage方法。该方法的作用是监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

// 开始分享功能
onShareAppMessage(){
   
}

通过上述代码开启了分享功能，再点击就可以分享了，分享的内容默认如下(点击打开默认是小程序的首页)

若是我们想要修改标题、内容、分享页面可以在onShareAppMessage方法中返回一个对象，该对象就是分享内容的配置项

onShareAppMessage(){
	return{
		title:'严肃，这个事情竟然是这样...', // 标题
		imageUrl:'https://pics7.baidu.com/feed/8ad4b31c8701a18b677fd398873d20032938fe6b.jpeg@f_auto?token=33076a6c56027505af215f34882af56b', // 内容显示图片
		path:'/pages/searchList/searchList'  // 打开小程序的默认页面(必须以/开头)
	}
}

设置之后的分享内容如下

若是我们不想点击右上角的分享，而是在页面中设置一个按钮来进行分享，可以进行如下设置

  
  <button open-type='share'>

总结

• ononShareAppMessage方法的作用是监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容;
• 当用户点击右上角的分享或是带有open-type属性且属性值为share的button按钮时，会自动触发该方法
• 我们可以通过在方法中返回一个转发内容的对象去修改默认的转发内容

(5)数据缓存

API->数据缓存

存储数据

数据的存储有同步与异步两种方式
[1]同步存储数据

wx.setStorageSync('boyfirend',{name:'niuniu',sex:'男',age:22})

[2]异步存储数据

wx.setStorage({
	key:"title",
	data:'我是最棒的',
	success:function(){
		console.log('存储成功')
	}
})

与浏览存储数据的区别

• 分为同步存储与异步存储两种方式
• 存储数据类型不做限制(浏览器只能存储字符串类型)

查看数据

我们把数据缓存之后可以在控制台storage中查看

获取数据

在小程序中获取数据分为同步和异步两种方式
[1]同步获取数据

console.log('获取数据', wx.getStorageSync('boyfirend')) // {name: "niuniu", sex: "男", age: 22}

[2]异步获取数据

wx.getStorage({
	key:'boyfirend',
	success:function(value){
		console.log('获取数据', value) // {data: {name: "niuniu", sex: "男", age: 22}, errMsg: "getStorage:ok"}
	}
})

删除数据

删除数据分为同步删除与异步删除
[1]同步删除数据

wx.removeStorageSync('boyfirend')

[2]异步删除数据

wx.removeStorage({
	key:'boyfirend',
	success:function(value){
		console.log('value',value) // {errMsg: "removeStorage:ok"}
	}
})

清空数据

清空数据有两种方式，同步清空与异步清空
[1]同步清空数据

wx.clearStorage()

[2]异步清空数据

wx.clearStorage({
	success:function(value){
		console.log('value',value) // {errMsg: "removeStorage:ok"}
	}
})

(6)图片预览

API->媒体->图片->wx.previewImage
作用：在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
语法：

wx.previewImage({
  current: '', // 当前显示图片的 http 链接(在uni-app的API中current可以添加当前显示图片的index) 告诉小程序从哪一个图片开始预览
  urls: [] // 需要预览的图片 http 链接列表
})

举例说明

previewClick(index){
	const imagesArr = this.goodInfo.pics.map(item=>{
		return item.pics_big_url
	})
	uni.previewImage({
		current:index,
		urls:imagesArr
	})
}

通过上述代码就可以将图片方法进行预览与转发了

(7)信息

API->开放接口

获取收货信息

wx.chooseAddress方法用于获取用户收货地址。调起用户编辑收货地址原生界面(微信界面)，并在编辑完成后返回用户选择的地址。

wx.chooseAddress({
      success: (res) => {
        console.log('获取到信息', res)
      },
      fail:(err)=>{
        console.log('err',err) // "chooseAddress:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json"
      }
    })

通过上述方法去获取用户信息，发现没有走到success方法，在使用fail方法时，发现获取需要进行全局配置，根据配置说明进行配置

 "requiredPrivateInfos": [
    "getFuzzyLocation", 
    "choosePoi",
    "chooseAddress"
  ]

然后就可以调用微信小程序收获地址页面获取收货地址了，信息如下