ios 开发uniapp插件 uniapp开发小程序插件

1.2 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

• 模板丰富
• 完善的智能提示
• 一键运行

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！

#1.2.1 下载 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
2. 点击首页的 DOWNLOAD 按钮
3. 选择下载 正式版 -> App 开发版

#1.2.2 安装 HBuilderX

1. 将下载的 zip包 进行解压缩
2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
3. 双击 HBuilderX.exe 即可启动 HBuilderX

#1.2.3 安装 scss/sass 编译

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：

1.2 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

• 模板丰富
• 完善的智能提示
• 一键运行

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！

#1.2.1 下载 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
2. 点击首页的 DOWNLOAD 按钮
3. 选择下载 正式版 -> App 开发版

#1.2.2 安装 HBuilderX

1. 将下载的 zip包 进行解压缩
2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
3. 双击 HBuilderX.exe 即可启动 HBuilderX

#1.2.3 安装 scss/sass 编译

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：

1.2.4 快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

#1.2.5 修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置

源码视图下可用的参考配置：

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器

1.3 新建 uni-app 项目

1. 文件 -> 新建 -> 项目
2. 填写项目基本信息
3. 项目创建成功

#1.4 目录结构

一个 uni-app 项目，默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

#1.5 把项目运行到微信开发者工具

1. 填写自己的微信小程序的 AppID：
2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：
3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：
4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：
5. 初次运行成功之后的项目效果：

取消控制台警告信息：

1.6 使用 Git 管理项目

#1.6.1 本地管理

1. 在项目根目录中新建 .gitignore 忽略文件，并配置如下：

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪

此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

1. 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

git init

1. 将所有文件都加入到暂存区：

git add .

1. 本地提交更新：

git commit -m "init project"

#1.6.2 把项目托管到码云

1. 注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）
2. 生成并配置 SSH 公钥
3. 创建空白的码云仓库
4. 把本地项目上传到码云对应的空白仓库中

-----------------------------------------------------------------------------------------------------------------------------

tabBar：（小程序02）

 

1. tabBar 的 6 个组成部分

① backgroundColor ： tabBar 的背景色

② selectedIconPath ：选中时的图片路径

③ borderStyle ： tabBar 上边框的颜色

④ iconPath ：未选中时的图片路径

⑤ selectedColor ： tab 上的文字选中时的颜色

⑥ color ： tab 上文字的默认（未选中）颜色

具体示意图如下 :

 

 

 实操步骤：

1.新建页面

2.配置tabBar

①和"globalStyle"平级，新增 tabBar 节点

② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

pagePath 指定当前 tab 对应的页面路径【必填】

text 指定当前 tab 上按钮的文字【必填】

iconPath 指定当前 tab 未选中时候的图片路径【可选】

selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

"tabBar": {
     "backgroundColor":"#C0C0C0",
      "selectedColor": "#C00000",
      "list": [
        {
          "pagePath": "pages/home/home",
          "text": "首页",
          "iconPath": "static/tab_icons/home.png",
          "selectedIconPath": "static/tab_icons/home-active.png"
        },
        {
          "pagePath": "pages/cate/cate",
          "text": "分类",
          "iconPath": "static/tab_icons/cate.png",
          "selectedIconPath": "static/tab_icons/cate-active.png"
        },
        {
          "pagePath": "pages/cart/cart",
          "text": "购物车",
          "iconPath": "static/tab_icons/cart.png",
          "selectedIconPath": "static/tab_icons/cart-active.png"
        },
        {
          "pagePath": "pages/my/my",
          "text": "我的",
          "iconPath": "static/tab_icons/my.png",
          "selectedIconPath": "static/tab_icons/my-active.png"
        }
      ]
      
    }

2.3 删除默认的 index 首页

1. 在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉
2. 同时，把 page.json 中记录的 index 首页 路径删除掉
3. 为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹
4. 同时，把 components 目录下的 uni-link 组件文件夹 删除掉

#2.4 修改导航条的样式效果==》

3.2. window---（小程序02）---未复习！！！

1. 打开 pages.json 这个全局的配置文件
2. 修改 globalStyle 节点如下：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }
}

2.5 分支的提交与合并

1. 1将本地的 tabbar 分支进行本地的 commit 提交：

git add .
git commit -m "完成了 tabBar 的开发"

1. 2将本地的 tabbar 分支推送到远程仓库进行保存：

git push -u origin tabbar

1. 3将本地的 tabbar 分支合并到本地的 master 分支：

git checkout master
git merge tabbar

1. 4删除本地的 tabbar 分支：

git branch -d tabbar

3. 首页

#3.0 创建 home 分支

运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：

3.1 配置网络请求

.网络数据请求（小程序02）

复习：

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

调用微信小程序提供的 wx.request() 方法，可以发起 GET,POST 数据请求，

-------------------------------------------------------------------------

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

3.2 轮播图区域

#3.2.1 请求轮播图的数据

实现步骤：

1. 在 data 中定义轮播图的数组
2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法
3. 在 methods 中定义获取轮播图数据的方法

示例代码：

export default {
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
  },
  methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
  },
}

3.2.2 渲染轮播图的 UI 结构

知识点：轮播图组件的使用（小程序01）

4.2.4. swiper 组件的使用

swiper 组件主要是用来实现轮播图效果 , swiper 组件相当于一个大盒子 , swiper - item 指的是轮播图

的每一项

代码如下 :

 

1. 渲染 UI 结构：

<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

2.样式：

美化 UI 结构：

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
</style>

3.2.3 配置小程序分包

3. 分包（小程序05）

复习：

1. 什么是分包

分包指的是把一个 完整的小程序项目 ，按照需求 划分为不同的子包 ，在构建时打包成不同的分包，用户

在使用时按需进行加载。

2. 分包的好处

对小程序进行分包的好处主要有以下两点：

可以优化小程序首次启动的下载时间

在多团队共同开发时可以更好的解耦协作

3. 分包前 项目的构成

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次

启动的下载时间。

4. 分包后 项目的构成

分包后，小程序项目由 1 个主包 + 多个分包 组成：

主包 ：一般只包含项目的 启动页面 或 TabBar 页面 、以及所有分包都需要用到的一些 公共资源

分包 ：只包含和当前分包有关的页面和 私有资源

5. 分包的加载规则

① 在小程序启动时，默认会下载 主包并启动主包内页面 tabBar 页面需要放到主包中

② 当用户进入分包内某个页面时， 客户端会把对应分包下载下来 ，下载完成后再进行展示

非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

6. 分包的体积限制

目前，小程序分包的大小有以下两个限制：

整个小程序所有分包大小不超过 16M （主包 + 所有分包）

单个分包 / 主包大小不能超过 2M

3.2. 使用分包

1. 配置方法

在 app.json 配置文件中 , 新增 subpackages 的节点 , 将希望放到分包的页面 , 写入 subpackages 数组的

元素中 .

2. 打包原则

① 小程序会按 subpackages 的配置进行分包， subpackages 之外的目录将被打包到主包中

② 主包也可以有自己的 pages （即最外层的 pages 字段）

③ tabBar 页面必须在主包内

④ 分包之间不能互相嵌套

3. 引用原则

① 主包无法引用分包内的私有资源

② 分包之间不能相互引用私有资源

③ 分包可以引用主包内的公共资源

3.3. 独立分包

1. 什么是独立分包

独立分包 本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而 单独运行 。

独立分包和普通分包的区别

最主要的区别： 是否依赖于主包才能运行

普通分包必须依赖于主包才能运行

独立分包可以在不下载主包的情况下， 独立运行

3. 独立分包的应用场景

开发者可以按需，将某些 具有一定功能独立性的页面配置到独立分包中 。原因如下：

当小程序从普通的分包页面启动时，需要首先下载主包

而独立分包 不依赖主包 即可运行，可以 很大程度上提升分包页面的启动速度

注意 ： 一个小程序中可以有多个独立分包 。

4. 独立分包的配置方法

和普通分包对比 , 独立分包就是在 subpackages 数组的某个元素中 , 配置 independent 为 true 即可

5. 引用原则

独立分包和普通分包以及主包之间，是 相互隔绝 的，不能相互引用彼此的资源！例如：

① 主包无法引用独立分包内的私有资源

② 独立分包之间，不能相互引用私有资源

③ 独立分包和普通分包之间，不能相互引用私有资源

④ 特别注意： 独立分包中不能引用主包内的公共资源

3.4. 分包预下载

1. 什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时， 由框架自动预下载可能需要的分包 ，从而 提升 进入后

续分包页面时的启动速度。

2. 配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包

的预下载规则，示例代码如下：

3. 分包预下载的限制

同一个分包中的页面享有共同的 预下载大小限额 2M ，例如：

在  subpkg 目录上鼠标右键，点击  新建页面 选项，并填写页面的相关信息：

3.2.4 点击轮播图跳转到商品详情页面

知识点：声明式导航（小程序03）

小程序中实现页面导航的两种方式

① 声明式导航

在页面上声明一个 导航组件

通过点击 组件实现页面跳转

② 编程式导航

调用小程序的导航 API ，实现页面的跳转

1.1. 声明式导航

1. 导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。

在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open - type 属性，其中：

url 表示要跳转的页面的地址，必须以 / 开头

open - type 表示跳转的方式，必须为 switchTab

示例代码如下：

导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。

在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open - type 属性，其中：

url 表示要跳转的页面的地址，必须以 / 开头

open - type 表示跳转的方式，必须为 navigate

为了方便 , 非 tabBar 页码的跳转时 open - type 也可以省略

示例代码如下：

3. 后退导航

如果要后退到上一页面或多级页面，则需要指定 open - type 属性和 delta 属性，其中：

open - type 的值必须是 navigateBack ，表示要进行后退导航

delta 的值必须是数字，表示要后退的层级

示例代码如下：

注意：

为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1

tabBar 页面是不能实现后退的效果的 . 因为 , 当我们跳转到 tabBar 页面，会关闭其他所有非

tabBar 页面 , 所以当处于 tabBar 页面时 , 无页面可退

1.3. 导航传参

1. 声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔

参数键与参数值用 = 相连

不同参数用 & 分隔

代码示例如下：

在 onLoad 中接收导航参数

通过 声明式导航传参 或 编程式导航传参 所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代

码如下：

将 <swiper-item></swiper-item> 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值。

--------------------------------------------------------------------------------下午：

渲染楼层的第一张图片（使用接口）对应的属性来进行渲染，样式的修改

2.左图片1层级

3.v-if和v-form不要同时使用！！！