【重点突破】—— UniApp 微信小程序开发官网学习One

一、初步认识

• uni-app官网：https://uniapp.dcloud.io/component/README

• HBuilderX官方IDE下载地址： http://www.dcloud.io/hbuilderx.html

• 选择版本： 下载App开发版，可开箱即用；

• 如使用cli方式创建项目，可直接下载标准版

• 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app，输入工程名

• 运行uni-app: 快捷键 ctrl+r 选择运行方式

• 显示项目目录： 视图 -> 显示文档结构图

• 发布为微信小程序：

1. 申请微信小程序AppID
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码
3. 在微信开小程序发者工具中，导入生成的微信小程序项目
4. 测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可

• 不建议使用vue-cli创建项目：必须使用vue-cli3.X，vue-cli更新快于HBuilderX

  npm install -g @vue/cli
  
  vue create -p dcloudio/uni-preset-vue my-project
  
  //运行并发布微信小程序版uni-app
  npm run dev:mp-weixin
  npm run build:mp-weixin

• 学习uni-app路径：

1. uni-app首页介绍 https://uniapp.dcloud.io/quickstart
2. 快速上手 https://uniapp.dcloud.io/quickstart
3. 3节官方教程 https://ke.qq.com/course/343370?taid=2788142445051210
4. 白话uni-app http://ask.dcloud.net.cn/article/35657
5. 培训实战视频 https://ke.qq.com/course/379043?from=800006421
6. 不太需要专门去学习小程序开发，只看uni-app官网即可
7. 注意vuejs可以在html中使用，而uni-app里没有HTML，直接就是vue文件。
8. 另外vue的路由、npm可以不学
9. uni-app官方教程学习手记 https://segmentfault.com/a/1190000017020710

• 跨端开发注意每个端，有每个端的管理规则

1. H5端的浏览器有跨域限制；
2. 微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；

• uni-app基于Vue 2.0实现，虽然使用vue，但在app和小程序里，不是spa，而是mpa

二、框架简介

• 开发规范：

1. 页面文件遵循 Vue 单文件组件 (SFC) 规范。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块
2. 组件标签靠近小程序规范
3. 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni

• uni-app API文档：https://uniapp.dcloud.io/api/README

1. uni.on 开头的 API 是监听某个事件发生的 API 接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
2. 如未特殊约定，其他 API 接口都接受一个 OBJECT 作为参数。
3. OBJECT 中可以指定 success，fail，complete 来接收接口调用结果。

• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

三、目录结构

┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见　

注意：

1. static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
2. css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
3. 有效目录： h5 -> H5 、mp-weixin -> 微信小程序

四、生命周期

• 应用生命周期：

1. onLaunch 当uni-app初始化完成时触发（全局只触发一次）
2. onShow 当uni-app启动，或从后台进入前台显示
3. onHide 当uni-app从前台进入后台
4. onUniNViewMessage 对nvue页面发送的数据进行监听（与微信小程序不同的，nvue向vue的通讯）

• 注意： 应用生命周期只可以在App.vue中监听，其它页面监听无效

• 页面生命周期

1. onLoad、onShow、onReady、onHide、onUnload、onResize
2. onPullDownRefresh、onReachBottom、onShareAppMessage、onBackPress……

五、路由

• 在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router

  {
      "pages": [
             {
                  "path": "pages/index/index",
                  "style": { ... }
             }, {
                  "path": "pages/login/login",
                  "style": { ... }
             }
        ]
  }

• 路由跳转

1. 使用navigator组件跳转 https://uniapp.dcloud.io/component/navigator

   <template>
       <view>
            <view class="page-body">
                  <view class="btn-area">
                         <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                                   <button type="default">跳转到新页面</button>
                         </navigator>
                         <navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
                                   <button type="default">在当前页打开</button>
                         </navigator>
                  </view>
             </view>
        </view>
   </template>

2. 调用Api跳转

   uni.navigateTo(OBJECT)： 保留当前页面，跳转到应用内的某个页面
   
   // -----> uni.navigateBack： 返回原页面
   
   uni.navigateTo({
         url: 'test?id=1&name=uniapp'
   });
   
   uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面
   
   uni.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面
   
   uni.switchTab(OBJECT)：跳转到tabBar页面，并关闭其他所有非tabBar页面
   
   // -----> pages.json:
   
   {
         "tabBar": {
         "list":   [{
               "pagePath": "pages/index/index",
               "text": "首页"
          },{
               "pagePath": "pages/other/other",
               "text": "其他"
         }]
      }
   }
   
   //  ------> other.vue:
   
   uni.switchTab({
         url: '/pages/index/index'
   });
   
   uni.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。
   
   可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

• 注意：

1. 页面跳转路径有层级限制，不能无限制跳转新页面
2. 路由API的目标页面必须是在pages.json里注册的vue页面。
3. 如果想打开web url，H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）
4. navigateTo, redirectTo 只能打开非 tabBar 页面。
5. switchTab 只能打开 tabBar 页面。
6. reLaunch 可以打开任意页面。
7. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
8. 不能在 App.vue 里面进行页面跳转

六、页面栈

• 与微信小程序相同，框架以栈的形式管理当前所有页面， 当发生路由切换的时候，会有页面出栈、入栈变化

1. 初始化、打开新页面：新页面入栈
2. 页面重定向：当前页面出栈、新页面入栈
3. 页面返回：页面全部出栈、只留下新的Tab页面
4. Tab切换、重加载：页面全部出栈、只留下新的页面

• 运行环境判断

1. 开发环境和生产环境： 通过process.env.NODE_ENV判断 'development'/'production'
2. 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

• 页面样式与布局
• 尺寸单位

1. px 即屏幕像素
2. upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。【以750宽的屏幕为基准，屏幕变宽，upx实际显示效果会等比放大】
3. vh 是视窗高度的百分比

• upx转换： 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
• 页面元素宽度： 750 * 元素在设计稿中的宽度 / 设计稿基准宽度
• HBuilderX中自动转换px为upx工具 ：https://ask.dcloud.net.cn/article/35445
• upx2px

1. upx是编译器处理的，手机端静态赋值生效，动态赋值无法生效。
2. 可使用 uni.upx2px(Number) 转换为 px 后再赋值。

   <script>
      export default {
           computed: {
              halfWidth() {
                    return uni.upx2px(750 / 2) + 'px';
              }
          }
      }
   </script>　　

• 样式导入

  <style>
        @import "../../common/uni.css";
  </style>　

• 内联样式： 尽量避免将静态的样式写进 style 中，以免影响渲染速度

  <view :style="{color:color}" />
  
  <view class="normal_view" />

• 选择器： .class、#id、element、element, element
• 特殊：

1. ::before、 ::after   ——   eg: view::after 在 view 组件后边插入内容，仅微信小程序和5+App生效
2. 在uni-app中不能使用*选择器
3. page相当于body节点

   page {
        background-color:#ccc;
   }

• 背景图片： 与普通web项目相同 background-image: url('~@/static/logo.png');

1. 注意： 支持base64格式图片；支持网络路径图片
2. 使用本地路径背景图片需注意：

① 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
② 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，
或将其挪到服务器上，从网络地址引用。
③ 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）

• <template/> 和 <block/>并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

1. 条件渲染

   <template>
        <view>
            <template v-if="test">
                <view>test 为 true 时显示</view>
            </template>
            <template v-else>
                 <view>test 为 false 时显示</view>
            </template>
         </view>
   </template>

2. 列表渲染

   <template>
        <view>
            <block v-for="(item,index) in list" :key="index">
                      <view>{{item}} - {{index}}</view>
            </block>
         </view>
   </template>

---

注：以上内容来自UniApp官网