【小程序】常见系统API | 页面分享 | 位置信息 | 本地存储

Myth丶恋晨 2023-10-02 20:42 13阅读 0赞

#### 文章目录 ####

*   *  常见系统API
     *   *  页面分享的基本介绍
         *  设备信息和位置信息
         *  小程序Storage存储

### 常见系统API ###

#### 页面分享的基本介绍 ####

**分享是小程序扩散的一种重要方式，小程序中有两种分享方式**：

> 方式一：点击右上角的菜单按钮，之后点击转发
> 
> 方式二：点击某一个按钮，直接转发

**当我们转发给好友一个小程序时，通常小程序中会显示一些信息**:

> 如何决定这些信息的展示呢？通过 `onShareAppMessage`
> 
> `onShareAppMessage`是监听用户点击页面内转发按钮（button 组件 open-type= “share”）或右上角菜单“转发”按钮回调的函数，并自定义转发内容。
> 
> 此事件处理函数需要 return 一个 Object，用于自定义转发内容；

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">title</td> 
   <td align="left">string</td> 
   <td align="left">转发标题，不传则默认使用当前小游戏的昵称。</td> 
  </tr> 
  <tr> 
   <td align="left">imageUrl</td> 
   <td align="left">string</td> 
   <td align="left">转发显示图片的链接，可以是网络图片路径或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4</td> 
  </tr> 
  <tr> 
   <td align="left">query</td> 
   <td align="left">string</td> 
   <td align="left">查询字符串，必须是 key1=val1&amp;key2=val2 的格式。从这条转发消息进入后，可通过 wx.getLaunchOptionsSync() 或 wx.onShow() 获取启动参数中的 query。</td> 
  </tr> 
  <tr> 
   <td align="left">imageUrlId</td> 
   <td align="left">string</td> 
   <td align="left">审核通过的图片 ID，详见使用审核通过的转发图片</td> 
  </tr> 
  <tr> 
   <td align="left">promise</td> 
   <td align="left">promise</td> 
   <td align="left">如果该参数存在，则其它的参数将会以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数</td> 
  </tr> 
  <tr> 
   <td align="left">toCurrentGroup</td> 
   <td align="left">boolean</td> 
   <td align="left">是否转发到当前群。该参数只对从群工具栏打开的场景下生效，默认转发到当前群，填入 false 时可转发到其他会话。</td> 
  </tr> 
 </tbody> 
</table>

onShareAppMessage() {
        
      return {
        
        title: "我是分享的标题",
        path: "/pages/index/index.js",
        imageUrl: "/assets/zznh.png"
      }
    }

--------------------

#### 设备信息和位置信息 ####

**获取设备信息**

> 在开发中，我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作。
> 
> 小程序提供了相关个API： `wx.getSystemInfo(Object object)`

wx.getSystemInfo({
        
    			success: (res) => {
        
    				console.log(res);
    			}
    		})

**获取位置信息**

> 开发中我们需要经常获取用户的位置信息，以方便给用户提供相关的服务：
> 
> 我们可以通过API获取： `wx.getLocation(Object object)`

wx.getLocation({
        
      success: (res) => {
        
        console.log(res);
      }
    })

**成功回调res中包含下面一些信息**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">latitude</td> 
   <td align="left">number</td> 
   <td align="left">纬度，范围为 -90~90，负数表示南纬</td> 
  </tr> 
  <tr> 
   <td align="left">longitude</td> 
   <td align="left">number</td> 
   <td align="left">经度，范围为 -180~180，负数表示西经</td> 
  </tr> 
  <tr> 
   <td align="left">speed</td> 
   <td align="left">number</td> 
   <td align="left">速度，单位 m/s</td> 
  </tr> 
  <tr> 
   <td align="left">accuracy</td> 
   <td align="left">number</td> 
   <td align="left">位置的精确度，反应与真实位置之间的接近程度，可以理解成10即与真实位置相差10m，越小越精确</td> 
  </tr> 
  <tr> 
   <td align="left">altitude</td> 
   <td align="left">number</td> 
   <td align="left">高度，单位 m</td> 
  </tr> 
  <tr> 
   <td align="left">verticalAccuracy</td> 
   <td align="left">number</td> 
   <td align="left">垂直精度，单位 m（Android 无法获取，返回 0）</td> 
  </tr> 
  <tr> 
   <td align="left">horizontalAccuracy</td> 
   <td align="left">number</td> 
   <td align="left">水平精度，单位 m</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 小程序Storage存储 ####

**在开发中，某些常见我们需要将一部分数据存储在本地：比如token、用户信息等**。

> 小程序提供了专门的Storage用于进行本地存储。

**同步存取数据的方法**：

> 存入: wx.setStorageSync(string key, any data)
> 
> 取出: any wx.getStorageSync(string key)
> 
> 移除: wx.removeStorageSync(string key)
> 
> 清空: wx.clearStorageSync()

// 存入数据
    wx.setStorageSync("name", "chenyq")
    wx.setStorageSync("age", 18)
    // 取出数据
    const name = wx.getStorageSync("name")
    const age = wx.getStorageSync("age")
    console.log(name);
    console.log(age);
    // 删除数据
    wx.removeStorageSync("name")
    // 清空数据
    wx.clearStorageSync()

**异步存储数据的方法**：注意传入的是对象

> wx.setStorage(Object object)
> 
> wx.getStorage(Object object)
> 
> wx.removeStorage(Object object)
> 
> wx.clearStorage(Object object)

// 存入数据
    		wx.setStorage({
        
    			key: "names",
    			data: ["aaa", "bbb", "ccc"],
    			// 存入成功的回调
    			success: (res) => {
        
    				console.log(res);
    			}
    		})
    		// 取出数据
    		const names = wx.getStorage({
        
    			key: "names",
    			success: (res) => {
        
    				console.log(res.data);
    			}
    		})
    		// 删除数据
    		wx.removeStorage({
        
    			key: "names",
    			success: (res) => {
        
    				console.log(res);
    			}
    		})
    		// 清空数据
    		wx.clearStorage()

**区别: 同步和异步的区别就是, 同步存取代码执行完成后, 可以立即获取数据, 而异步代码执行完成, 不能保证可以立即获取到数据**

> 如果是存完之后就要使用, 那么使用同步存取
> 
> 如果只是想存入一个数据, 那么使用异步操作