微信小程序 - 功能入门篇

陆续补充 ~

前情重点

.js文件逻辑区域
.json文件是页面的配置文件，页面的配置文件是非必要的
.wxml文件 UI布局
.wxss文件页面的样式表，页面的样式表是非必要的

搭档篇 - 小程序 - 效果入门篇

本地存储

异步缓存
同步缓存
同步缓存和异步缓存的区别
以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行

扩展：内置三种回调

	//分别对应成功、完成、失败三种回调
	success: function(res) {
		console.log('成功:' + res);
	},
	complete: function() {
		console.log('完成:' + res)
	},
	fail: function(res) {
		console.log('失败:' + err);
	 }

本地数据存放

API

wx.setStorage(OBJECT) - 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
wx.setStorageSync(OBJECT) - 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

使用方式

 //api ： wx.setStorage({})
 //app.js 文件原有的登录方法
 // 登录
    wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
		  //@params key、data存放的键值对
          wx.setStorage({
              key: 'openId',
              data: res.code,
             
              success: function(res) {
                console.log('成功:' + res);
              },
              complete: function() {
                console.log('完成:' + res)
              },
              fail: function(res) {
                console.log('失败:' + err);
              }
            })
        }
      })

本地数据取出

API

wx.getStorage(OBJECT) - 从本地缓存中异步获取指定 key 对应的内容
wx.getStorageSync(OBJECT) - 从本地缓存中同步获取指定 key 对应的内容。
wx.getStorageInfoSync(OBJECT) - 同步获取当前storage的相关信息

 //api ： wx.getStorage({})
 //getStorage为我们在wxml定义的事件
  getStorage: function() {
    wx.getStorage({
      key: 'openId',
      success: function(res) {
        console.log('openId 取出来的'+res.data)
      }
    });
  }

本地数据移除指定 key

API

wx.removeStorageSync(KEY) - 从本地缓存中同步移除指定 key

 remove: function() {
 wx.removeStorage({
      key: 'openId',
      success: function(res) {
        console.log('已清除当前key相关数据')
      }
    });
  }

清理数据缓存

API

wx.clearStorage() - 清理本地数据缓存
wx.clearStorageSync() - 同步清理本地数据缓存

使用方式

//api ： wx.clearStorage();
//clearStorage为我们在wxml定义的事件
 clearStorage: function() {
    wx.clearStorage();
  }

页面跳转

1.“wx.navigateTo(OBJECT) → 保留当前页面，跳转到应用内的某个页面”

// goto：事件    ../mine/jump：跳转类名
 goto: function() {
    wx.navigateTo({
      url: '../mine/jump'
    })
  }

返回方式

左上角有一个返回箭头，可返回上一个页面
通过方法 wx.navigateBack 返回原页面

2.wx.redirectTo(OBJECT) → 左上角没有返回箭头，不能返回上一个页面

// jump：事件    ../mine/Thrned：跳转类名
 jump: function() {
    wx.redirectTo({
      url: '../mine/Thrned'
    })
  }

3.wx.switchTab(OBJECT) → 跳转到一级界面，一般为首页、个人中心等

// jumpTab:function：事件   ../index/index：跳转类名
 jumpTab:function(){
    wx.switchTab(
      {
        url:'../index/index'
      }
    )
 }

全局变量 globalData

1.首先在 app.js内初始化globalData的全局变量
在这里插入图片描述
2. 在需要使用全局变量数据的地方 getApp()进行初始化，当然如果只是需要某个字段，完全可以链式编程

PS:在需求页面的最上方进行数据获取

//获取应用实例
const app = getApp()
//获取某个字段
var url = getApp().globalData.Url;

如图 - - ~
在这里插入图片描述

右上角转发

未设置右上角的分享事件，显示为 当前页面未设置分享
设置完右上角的分享事件后，显示为转发

官网API地址

部分Api的作用

wx.showShareMenu的真正作用，是控制是否显示转发分享，而不是直接弹出分享界面
wx.showShareMenu 的参数 withShareTicket 为 true 时，点击模拟器右上角菜单后出现的转发按钮，会出现一个测试群列表
对应wx.hideShareMenu就是隐藏转发菜单

设置方式

 /**
  * 小程序的首个界面的onLoad生命周期内打开分享功能
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
    wx.showShareMenu({
      withShareTicket: true
    })
},

实现效果

微信小程序 - 功能入门篇

陆续补充 ~

前情重点

搭档篇 - 小程序 - 效果入门篇

目录

本地存储

页面跳转

全局变量 globalData

右上角转发

猜你喜欢