小程序之开发教程（三）

七，页面传参

• wxml

  <view>
    <navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator>
  </view>
  
  <view>
    <navigator open-type="redirect" url="/pages/event/event?name=曾庆林&age=33">跳转并替换</navigator>
  </view>

• js

  Page({
    /*页面的初始数据*/
    data: {
      num: null,
    },
    goEvent(e: any) {
      // 获取到传递的参数type
      var type = e.target.dataset.type;
      if (type == "redirect") {// 如果type值是redirect 替换跳转
        wx.redirectTo({ url: "/pages/event/event", })
      } else { // 否则就普通跳转
        wx.navigateTo({ url: '/pages/event/event', })
      }
    },
    /*生命周期函数--监听页面加载*/
    onLoad(options) {
      // 更新导航栏的标题
      wx.setNavigationBarTitle({ title: '导航与跳转', })
    },
    /*生命周期函数--监听页面显示*/
    onShow() {
      this.setData({ num: app.globalData.num })
    }
  })

• 页面传递的参数

  <view>页面传递的参数</view>
  <view>
  　　姓名：{{name}}，年龄{{age}}
  </view>

八，封装 request

• 文件路径： utils/request.js
  

  // 基础的url
  const URI = {
    baseURL: "http://dida100.com"
  }
  // {name:"mumu",age:18} => name=mumu&age=18
  function tansParams(obj) {
    var str = "";
    for (var k in obj) {
      str += k + "=" + obj[k] + "&";
    }
    //移除最后一个&
    return str.slice(0, -1);
  }
  function request(option) {
    var url = option.url;
    // 1.可以添加baseURL
    // 是不是以http开头的，是用url不是加上baseURL
    url = url.startsWith("http") ? url : URI.baseURL + url;
    // 选项里面有params（get传入的参数）
    if (option.params) {
      // 如果有参数，把参数转换为url编码形式加入
      url += "?" + tansParams(option.params);
    }
  
    //2.可以添加请求头
    var header = option.header || {};
    header.Authorization = "Bearer " + wx.getStorageSync('token');
  
    //3.可以添加加载提示
    if (option.loading) {
      wx.showToast({
        title: option.loading.title,
        icon: option.loading.icon,
      })
    }
  
    // 返回一个promise
    return new Promise((resolve, reject) => {
      wx.request({
        // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
        url: url,
        method: option.method || "GET",//请求的方法 默认get
        data: option.data, //post出入的参数
        header,
        success(res) {
          // 请求成功
          resolve(res.data);
        },
        fail(err) {
          // 04 对错误进行处理
          wx.showToast({ title: "加载失败", icon: "none" })
          // 请求失败
          reject(err);
        },
        complete() {
          // 关闭加载提示
          wx.hideToast();
        }
      })
    })
  }
  // 定义get简易方法
  request.get = (url, config) => {
    return request({ url, method: "get", ...config })
  }
  // 定义post简易方法
  request.post = (url, data, config) => {
    return request({ url, method: "post", data, ...config })
  }
  // 导入request
  module.exports = { request }

九，Vant Weapp 轻量、可靠的小程序 UI 组件库

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

1、安装

☘️步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

☘️ 步骤二 修改 app.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
  ...
  "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

！！！注意：由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可

☘️ 步骤三 构建 npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

☘️ 步骤四 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装
npm i -D miniprogram-api-typings

# 通过 yarn 安装
yarn add -D miniprogram-api-typings

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

2、使用

☘️ 引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
　　"van-button": "@vant/weapp/button/index"
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
　　"van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
　　"van-button": "path/to/@vant/weapp/lib/button/index"
}

☘️ 使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

3、其他

在开发者工具中预览示例小程序

# 将项目克隆到本地
git clone git@github.com:youzan/vant-weapp.git

# 安装项目依赖
cd vant-weapp && npm install

# 执行组件编译
npm run dev