小程序拓展

uni 多段开发

多端编译

1. 开发阶段的多段编译

   npm run dev:mp-weixin
   

2. 发布阶段的多段编译

   npm run build:mp-weixin
   

条件编译

条件编译是 uniapp 中的一种根据特殊的注释来实现不同平台下运行不同代码的功能技术。

语法

#ifdef 平台代号

需要条件编译的代码

# endif

注意：

开头与结尾的代码需要注释起来。

实例

<template>

  <view class="page">

    <!-- #ifdef H5 -->

    这里是网页端

    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->

    这里是小程序端

    <!-- #endif -->

  </view>

</template>



<script>

export default {

  onLoad() {

    // #ifdef H5

    console.log('H5');

    // #endif



    // #ifdef MP-WEIXIN

    console.log('小程序');

    // #endif

  }

}

</script>



<style lang="scss" scoped>

// #ifdef H5

.page {background: pink;}

// #endif

// #ifdef MP-WEIXIN

.page {background: red;}

// #endif

</style>

上线发布

1. 使用 uniapp 构建打包项目
2. 在微信小程序中导入要发布的项目
3. 在小程序工具中点击“上传”
4. 回到微信公众平台上手动点击提交审核和上线

分包

作用

解决项目体积过大和提高启动效率的一种技术

分类

• 普通分包
• 独立分包
• 分包预下载
• 分包异步化

使用

1. 普通分包

   小程序可以看成一个主包，单个包发布时大小限制2M，所有包加起来大小不能超过20M。

   在 app.json 文件中，通过关键字 subpackages 来配置分包，如下图所示，在 packageA 文件夹下创建一个 cat 的文件。

   

2. 独立分包

   独立分包是小程序中一种特殊类型分包，可独立于主包和其他分包运行，从独立页面进入小程序时，不需要下载主包，当用户进入普通分包或主包页面时，主包才会被下载。

   注意：

   由于独立分包不依赖于主包，因此，app.js 、 app.wxss 等功能也不能被独立分包所使用。

   通过关键字 independent 来设置独立分包。

   

使用 npm

安装普通 js 库

1. 在根目录中初始化项目

   npm init -y
   

2. 安装依赖

   npm i
   

3. 微信开发者工具中点击 工具 ——> 构建 npm
4. 代码中使用插件

安装 ui 库

vant 也有争对小程序的 ui 框架，官网如下：vant weapp

1. 初始化项目
2. 安装依赖
3. 构建 npm
4. 页面设置引入的组件
5. 使用组件

webview

介绍

webView 是一个特殊的组件，理解为浏览器组件，功能类似 iframe 标签，传入一个网站的 url ，即可显示对应的内容。

使用

<web-view src=""></web-view>

跨页面传参

url 传参

本地存储

1. 设置

   wx.setStorageSync('data', data)
   

2. 获取

   wx.getStorageSync('data')
   

应用全局变量

在 app.js 文件中定义全局数据

data: {
  name: 'dao'
}

在页面中通过 getApp() 返回的应用对象来获取

let app = getApp()
app.data.name

公共变量

定义一个独立的 js 把数据存进去即可

const data = { name: 'dao' }
module.exports = data

页面 js文件引入

const data = require("../../common")
Page({
    onLoad: function () {
        console.log(data)
    }
})

事件通道 EventChannel

如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面会建立一个数据通道。

• 被打开的页面可通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象。

  

• 打开的页面可通过 wx.navigateTo 的 success 回调包含的 EventChannel 对象。

  

两者可通过 emit 和 on 方法相互发送、监听事件。