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

一、初步认识

  • 选择版本： 下载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
  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官网

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ljq66/p/11947317.html