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

时间 2019-12-20

标签重点突破 uniapp 微信程序开发学习繁體版

原文原文链接

1、初步认识javascript

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 选择运行方式

发布为微信小程序：

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

不建议使用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路径：

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

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

H5端的浏览器有跨域限制；
微信小程序会强制要求https连接，而且全部要联网的服务器域名都要配到微信的白名单中；

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

2、框架简介css

开发规范：

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

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

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

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

3、目录结构html

┌─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 配置页面路由、导航条、选项卡等页面类信息，详见

注意： vue

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

4、生命周期java

应用生命周期：

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

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

页面生命周期

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

5、路由es6

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

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

路由跳转

使用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>

调用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() 获取当前的页面栈，决定须要返回几层。

注意：

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

6、页面栈web

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

初始化、打开新页面：新页面入栈
页面重定向：当前页面出栈、新页面入栈
页面返回：页面所有出栈、只留下新的Tab页面
Tab切换、重加载：页面所有出栈、只留下新的页面

运行环境判断

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

页面样式与布局
尺寸单位

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

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

upx是编译器处理的，手机端静态赋值生效，动态赋值没法生效。

可以使用 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
特殊：

::before、 ::after —— eg: view::after 在 view 组件后边插入内容，仅微信小程序和5+App生效
在uni-app中不能使用*选择器
page至关于body节点
```
page {
     background-color:#ccc;
}
```

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

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

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

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

条件渲染

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

列表渲染

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

注：以上内容来自UniApp官网npm