前端实习——微信小程序(3)

最新推荐文章于 2024-09-11 23:17:16 发布

是吱吱

最新推荐文章于 2024-09-11 23:17:16 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_41662017/article/details/103722382

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨小程序的路由机制，包括tabBar跳转、普通页面跳转、重定向及返回等，同时解析API的三种形式：事件API、同步API与异步API。此外，文章还覆盖了缓存管理、网络请求及模块化组件化的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

6.路由和导航

小程序的可显示页面和vue不一样(vue-router)

小程序的页面路由需要定义在app.json的pages属性中

(1)路由的性质：跳转的性质

如何跳转

根据性质不同，可以使用一下方式跳转到不同性质的页面

Navigator组件

api

tabBar的跳转：

选项卡按钮的页面跳转，没有历史记录(首页、购物车、类别、我的【个人中心首页】)用户访问比较频繁的页面

普通的页面跳转：navigate

跳转到详情页{id}、跳转到列表页{type}(经常传参)

有历史记录

**重定向的跳转(临时)：**redirect

没有上一级历史记录，

<navigator url="/pages/c/c" open-type="redirect">重定向到c</navigator>

**永久重定向：**reLaunch

支付操作

<navigator url="/pages/c/c" open-type="reLaunch">重载到c</navigator>

返回：

Back(2)几层

<navigator open-type="navigateBack" delta="2">huitui</navigator>

(2)API跳转

 wx.navigateTo({
      url: '/pages/detail/detail',
    })

页面跳转如何传参

除了navigateBack和switchTab不能传参，其他都可以在路径后面进行传参

navigator
<navigator url="/pages/detail/detail?id=x0001&name=zbj"></navigator>
api
  <view bindtap="oneTh1" data-id="x0001" data-name="zbj">传参2</view>
 oneTh1(e){
    let {id,name} = e.currentTarget.dataset;
    wx.navigateTo({
      url: `/pages/detail/detail?${id}=x0001&${name}=zbj`,
    })
  }

跳转到其他小程序

<!-- 跳转到其他小程序 -->
<navigator target="miniProgram" app-id="wx6acf0caf71cb5860">跳转到其他小程序</navigator>

五、模块化

规范和语法层面上的东西，小程序中也完全支持模块化

es6模块化规范

Commonjs模块化规范

好处：能够避免全局变量的污染、多人协作开发、灵活的代码复用。

js的模块化(逻辑层)

把一些js的公共代码使用模块化的规范去管理

1.实际应用

1.ES6模块化使用时间

语法层面上就支持模块化，前端领域项目，都应该使用ES6模块化

Vue组件暴露、react组件暴露(es6模块化)

Vue和React框架不属于后端范畴

2.Commonjs模块化使用时间

node后端自己定义的一套模块化规范，只要和node相关的项目、工具，都应该使用Commonjs模块化规范。

写的基于nodejs的接口项目

Webpack工具的配置信息。也是使用Commonjs模块化规范

vue-cli的配置信息，也是Commonjs模块化规范写的

小程序中两个主流规范都支持，更推荐使用ES6模块化规范

2.模块化规范

1.ES6

(1)分别暴露

tools.js定义公共方法或其他数据

let name="qaz"
let age = 18;
Export {name,age}

引用

Import {name,age} from 'tools.js'

(2)默认暴露

Export default 任意数据

引用

Import 变量名任意 from 'tools.js'

react源码分析

import React,{Component} from 'react'

2.Commonjs

exports/module.exports

require()

node后端项目都是使用commonjs模块封装的。包括一些node工具(vue-cli、wabpack)

六、组件化

1.组件化和模块化的区别

vue\react\小程序都偏向于组件化

组件化包含结构、样式、js于一身，模块化更偏向于js

提升开发效率、代码复用、便于团队开发

小程序自定义组件语法：了解

思想必须得懂

小程序中的自定义组件学习到什么程度

语法：了解

思想：重要

2.自定义组件步骤

1.创建一个test1组件(放到components文件夹中)

2.先创建一个test1文件夹

3.在test1文件夹下新建一个component

统一每个组件内部都叫index

封装组件的一些功能(结构、样式、js)

4.特殊文件说明

[组件名].json

{
  "component": true,//代表是组件
  "usingComponents": {}
}

[组件名].js

// components/test1/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

5.注册组件

全局注册:app.json

"usingComponents":{
    "m-test1":"/components/test1/index"
  }

在页面中使用

<m-test1></m-test1>
<m-test1 />

局部注册:在对应页面的json文件中注册

3.使用自定义组件更新swiper

<m-sswiper banners="{{['1.jpg','2.jpg']}}" />
<m-sswiper />

七、API

函数、功能、方法、接口

Math.random()随机小数

使用ECmascript语言。没有DOM.BOM,Window,Document

小程序中的js只包含了ECMAScript的语法+js中内置对象+小程序框架提供的api方法(App/Page/Component)

1.小程序中API的三种形式

1.有关事件

我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

// 1.事件api
wx.onAppShow(function(result){
  console.log(result,'小程序显示了')
})

2.同步API

我们约定，以 Sync 结尾的 API 都是同步 API，如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明。

如果没有特殊情况，我们更推荐使用同步

同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

    // 1.1同步方法
     let system = wx.getSystemInfoSync();
     console.log(system);
     let {screenHeight,screenWidth}  = system;
     console.log(screenHeight, screenWidth)
     this.setData({
       width: screenWidth+'px',
       height: screenHeight+'px'
     })

3.异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

 setWidthHeight() {
    // 获取系统信息
    wx.getSystemInfo({
      success:(res)=> {
        let {
          screenHeight,
          screenWidth
        } = res;
        console.log(screenHeight, screenWidth);
        console.log(this)
        this.setData({
          width: screenWidth + 'px',
          height: screenHeight + 'px'
        })
      },
    })
  },

异步 API 返回 Promise

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

2.交互api

showToast更多的应用在临时的提示一下，比如：登录成功、注册成功、删除成功

showLoading更适用于请求数据。下一页、刷新，同时配合hideLoading(请求成功隐藏)
缓存

浏览器有cookie、localStorage、sessionStorage

如果不手动删除，则可以一直存储在浏览器端【不会随着重新打开程序或者不会随着刷新而改变当中的数据】

cookie、localStorage、sessionStorage和vue/小程序app.js中的全局数据有着本质区别：

vue/小程序app.js中的数据一刷新页面就会回到初始状态

小程序中的缓存api和他们的特性基本一致

H5的缓存可以存储字符串，而小程序的缓存可以存储number、string、Boolean、array、object。

小程序分同步和异步api,建议同步

设置

获取

清除

清空

<view wx:for="{{lists}}" wx:key="*this" wx:for-index="i">
  <view class="title" wx:if="{{i===0}}">通话故事</view>
  <view class="title" wx:else>新闻早知道</view>
  <view class="item" wx:for="{{item}}" wx:for-index="j" wx:for-item="val" wx:key="id">
    {{val.name}}---{{i}}--{{j}}
    <text bindtap="_setSorage" data-i="{{i}}" data-j="{{j}}">关注</text>
  </view>
</view>

// pages/02store/02store.js
Page({

  _setSorage(e) {
    console.log(e)
    let {
      i,
      j
    } = e.currentTarget.dataset;
    // wx.setStorageSync('hobbys', this.data.lists[i][j])
    // 存储成数组的结构
    // 分类：故事（story）,新闻(news)
      方法一：
      let key = i==0?'story':'news';
      let datas = wx.getStorageSync(key)||[]
      datas.push(this.data.lists[i][j])
      wx.setStorageSync(key, datas)
      方法二：
    if (i == 0) {
      let storyArr = wx.getStorageSync('story') || [];
      storyArr.push(this.data.lists[i][j]);
      wx.setStorageSync('story', storyArr)
    } else {
      let newsArr = wx.getStorageSync('news') || [];
      newsArr.push(this.data.lists[i][j]);
      wx.setStorageSync('news', newsArr);
    }
  },
  data: {
    lists: [
      [{
          id: '1001',
          type: '1',
          name: '哈哈哈哈1'
        },
        {
          id: '1002',
          type: '1',
          name: '哈哈哈哈2'
        },
        {
          id: '1003',
          type: '1',
          name: '哈哈哈哈3'
        },
      ],
      [{
          id: '1001',
          type: '2',
          name: '哈哈哈哈4'
        },
        {
          id: '1002',
          type: '3',
          name: '哈哈哈哈5'
        },
        {
          id: '1003',
          type: '3',
          name: '哈哈哈哈6'
        },
      ]
    ]
  }
})

删除某一个缓存

  removeStory(){
    wx.removeStorageSync('story')
  }

清空所有的

  clearAll(){
    wx.clearStorageSync()
  },

九、网络请求

重点、难点

wx.request({

url,

data,

methods:请求方式/get/post

success(res){}

})

封装promise

let baseUrl = "http://localhost:3000/";
// 集合promoise
// 在业务层的函数中，可以定义async函数，真正的把异步变成同步
const http=(options)=>{
  /*
  *url:
  *data:
  *header:
  */ 
  return new Promise((resolve,reject)=>{
    // Promose函数内部是异步的
    wx.request({
      url: `${baseUrl}${options.url}`,
      method: options.method || 'get',
      data: options.data||{},
      header: options.header || {
        'content-type':'application/x-www-from-urlencoded'
      },
      success:resolve,
      fail:reject
    })

  })
}
// 如果http.js文件只封装了一个函数，使用默认暴露就可以
// export default http;
export{
  http
}

上线时需要配置后台request接口