微信小程序开发 day01 - 技术选型、网络封装

一、邂逅微信小程序

1、从mpvue和wepy这两个小程序开发框架我们可以得出一个什么结论？

• 如果一个应用重度依赖于非原生框架，一旦框架不维护，那么很容易出现bug。
• 从应用层去解决框架的bug还是非常困难的。

image.png

2、目前除开纯原生开发，还有两个比较优秀的跨端框架是什么？

image.png

3、通常来说一个小程序页面，会有哪四个文件？

-【.wxml】对应HTML代码
-【.wxss】对应CSS代码
-【.js】对应JavaScript代码
-【.json】对应页面的配置文件代码

image.png

4、如果使用vscode开发原生微信小程序，需要安装哪些插件？

image.png

5、认识一门语言，最好从哪里开始？

• 从官方的【指南、guide】开始，①改变message ②列表 ③计数器
  -【指南】新手引导，初学者理解整个过程的学习文档
  -【框架】描述的是整个框架，以及核心技术
  -【组件】开发中常用到的UI控件
  -【API】官方为小程序提供特殊功能的一些接口

二、项目搭建开发

1、配置tabbar

• app.json文件中

  "tabBar": {
    "list": [{
      "pagePath": "pages/home-music/index",
      "text": "音乐",
      "iconPath": "assets/images/tabbar/music_normal.png",
      "selectedIconPath": "assets/images/tabbar/music_active.png"
    }, {
      "pagePath": "pages/home-video/index",
      "text": "视频",
      "iconPath": "assets/images/tabbar/video_normal.png",
      "selectedIconPath": "assets/images/tabbar/video_active.png"
    }]
  },

2、小技巧，可以通过设置编译模式，直接打开我们开发的页面。

image.png

3、小技巧，使用vscode编写代码保存后，微信开发者工具未刷新？

• 开启微信开发者工具的【热重载】功能

image.png

4、对网络层进行分三层封装？

• 最底层 index.js

const BASE_URL = "http://123.207.32.32:9001"
class HYRequest {
  request(url, method, params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: BASE_URL + url,
        method: method,
        data: params,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  }

  get(url, params) {
    return this.request(url, "GET", params);
  }

  post(url, params) {
    return this.request(url, "POST", params);
  }
}

const hyRequest = new HYRequest();

export default hyRequest;

• 中间层 api_video.js

import hyRequest from "./index";

export function getTopMV(offset, limit) {
  return hyRequest.get("/top/mv", {
    offset,
    limit
  })
}

• 应用层 page.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
      let res = await getTopMV(0, 10);
      console.log(res);
  },

小程序进阶【官方文档】

1、启动优化相关

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/start.html