一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

小程序(api)

网络请求

wx.request

网络请求域名配置

每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。小程序登录后台 – 开发管理 – 开发设置 – 服务器域名。

配置域名时需要注意

  • 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议。
  • 域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost。
  • 可以配置端口,如 https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
  • 如果不配置端口。如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以。如果 向 https://myserver.com:443 请求则会失败。
  • 域名必须经过 ICP 备案。
  • 出于安全考虑,api.weixin.qq.com 不能被配置为服务器域名,相关 API 也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API。
  • 不支持配置父域名,使用子域名。

对请求函数的封装

主要就是调用wx.request然后返回一个promise。

    // 封装成函数
    export function zhRequest(options) {
      return new Promise((resolve, reject) => {
        wx.request({ 
          ...options, 
          success: (res) => {
            resolve(res.data)
          },
          fail: reject
        })
      })
    }
    // 封装成类
    class ZhRequest {
      // 初始化对象的时候传入请求根路径
      constructor(baseURL) {
        this.baseURL = baseURL
      }
      request(options) {
        const { url } = options
        return new Promise((resolve, reject) => {
          wx.request({
            ...options,
            url: this.baseURL + url,
            success: (res) => {
              resolve(res.data)
            },
            fail: (err) => {
              console.log("err:", err);
            }
          })
        })
      }
      get(options) {
        return this.request({ ...options, method: "get" })
      }
      post(options) {
        return this.request({ ...options, method: "post" })
      }
    }

封装成类的好处

  • 可以指定多个服务器接口请求数据
  • 可以更具体的调用哪个请求方式。

弹窗

showToast、showModal、showLoading、showActionSheet

传入配置对象就可以设置对应的效果了。

  • showToast: 显示时长是通过duration属性控制的。
  • showLoading:如果不调用wx.hideLoading()他会一直显示。
  • showModal: 确认弹框,默认底部会出现取消和确认按钮。可以传入success回调函数来监听用户点击的状态。
  • showActionSheet:抽屉弹窗。success回调是监听选择项的点击,fail回调是监听取消按钮的点击。

分享

  • 监听用户点击页面内转发按钮(button 组件 open-type=”share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
  • onShareAppMessage, 需要return一个对象来定制分享界面的展示。该函数是Page函数的一个选项。

获取设备信息,位置信息

  • 获取设备信息,wx.getSystemInfo(), 传入success回调,可以获取设备对应的信息。
  • 获取位置信息,wx.getLocation(), 传入success回调,可以获取当前位置信息。

在获取位置信息的时候需要在app.json中定义一下内容。

  "permission": {
    "scope.userLocation": {
      // 获取信息的文本提示。
      "desc": "需要获取您的位置信息"
    }
  },

Storage存储

可以存储任何数据类型的内容,不会像浏览器storage只能存储字符串类型的数据。

同步存取数据的方法

  • wx.setStorageSync(string key, any data)
  • wx.getStorageSync(string key)
  • wx.removeStorageSync(string key)
  • wx.clearStorageSync()

异步存储数据的方法:

  • wx.setStorage(Object object)
  • wx.getStorage(Object object)
  • wx.removeStorage(Object object)
  • wx.clearStorage(Object object)
    wx.setStorage({
      key: "name",
      data: "zh",
      encrypt: true, // 加密之后获取的时候也需要把该属性设置为true。
      success: (res) => {
        wx.getStorage({
          key: "name",
          encrypt: true,
          success: (res) => {
            console.log(res);
          }
        })
      }
    })

界面跳转的方式

通过navigator组件

navigator组件主要就是用于界面的跳转的,也可以跳转到其他小程序中。
小程序(api)

通过wx的API跳转

小程序(api)

跳转功能主要是通过wx.navigateTo()来实现。但是不能跳到 tabbar 页面。

一般跳转页面的时候都会携带一些数据。携带的参数可以在onLoad生命周期中拿到。

    // 页面导航操作
    wx.navigateTo({
      // 跳转的过程, 传递一些参数过去
      url: `/pages2/detail/detail?name=${name}&age=${age}`,
      events: {
        backEvent(data) {
          console.log("back:", data);
        },
        coderwhy(data) {
          console.log("why:", data);
        }
      }
    })
  }
  onLoad(options) {
    console.log(options);
    const name = options.name
    const age = options.age
  }

wx.navigateBack(Object object) 关闭当前页面,返回上一页面或多级页面。通过传入的配置设置。
小程序(api)
和上一个页面通信,我们可以这样做。

  • 方式一,获取页面对象实例
    小程序(api)
    // 点击按钮监听事件
    onTap() {
        // 返回上一级页面
        wx.navigateBack()
        // 获取到上一个页面的实例
        const pages = getCurrentPages() // 可以获取当前页面栈中的所有页面,并且当前页面也会拿到,返回一个数组。
        const prePage = pages[pages.length-2] // 拿到上一个页面实例对象
        prePage.setData() // 修改上一个页面数据。
    }
    
    // 如果想要让只要返回页面就修改数据,我们可以将上面的操作放在onUnload中
     onUnload() {
        // 获取到上一个页面的实例
        const pages = getCurrentPages() // 可以获取当前页面栈中的所有页面,并且当前页面也会拿到,返回一个数组。
        const prePage = pages[pages.length-2] // 拿到上一个页面实例对象
        prePage.setData() // 修改上一个页面数据。
    }
  • 方式二, 在小程序基础库 2.7.3 开始支持events参数,也可以用于数据的传递。跳转到的页面传递参数的方式就好像子组件像父组件传递事件一样。
    // 页面导航操作
    wx.navigateTo({
      // 跳转的过程, 传递一些参数过去
      url: `/pages2/detail/detail?name=${name}&age=${age}`,
      events: {
        // 跳转到的页面调用该函数,并传递参数。
        backEvent(data) {
          console.log("back:", data);
        }
      }
    })
    
    
    // 拿到eventChannel
    const eventChannel = this.getOpenerEventChannel()

    // 通过eventChannel回调函数
    eventChannel.emit("backEvent", { name: "zh", age: 23 })

原文链接:https://juejin.cn/post/7314519123178029068 作者:Spirited_Away

(0)
上一篇 2023年12月21日 上午10:05
下一篇 2023年12月21日 上午10:16

相关推荐

发表评论

登录后才能评论