【重点突破】—— 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 选择运行方式
显示项目目录：视图 -> 显示文档结构图
发布为微信小程序：

不建议使用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基于Vue 2.0实现，虽然使用vue，但在app和小程序里，不是spa，而是mpa

二、框架简介

开发规范：

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

数据绑定及事件处理同 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 配置页面路由、导航条、选项卡等页面类信息，详见

注意：

四、生命周期

应用生命周期：

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

五、路由

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

{

    "pages": [

           {

                "path": "pages/index/index",

                "style": { ... }

           }, {

                "path": "pages/login/login",

                "style": { ... }

           }

      ]

}

路由跳转

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

注意：

六、页面栈

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

运行环境判断

页面样式与布局
尺寸单位

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

<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
特殊：

page {

     background-color:#ccc;

}

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

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

<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官网

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

【重点突破】—— UniApp 微信小程序开发官网学习One的相关教程结束。

相关推荐

Layui 2.8.0 正式发布，官网全新文档站朴实归来

C++程序开发技巧

【微信小程序开发】全局配置

微信小程序开发：学习笔记[8]——页面跳转及传参

微信小程序开发环境安装以及相关设置配置

微信小程序开发——模板中加载html代码

微信小程序开发--模板(template)使用，数据加载，点击交互

win32界面程序开发，自制一个会自动销毁的提示框