uni-app 入门

西柚XI
367 阅读4分钟

第1章 基础知识

1-1 uni-app介绍

  • uni-app和vue有什么关系?
    • 使用vue.js开发
    • 在发布到h5时，支持所有vue语法
    • 发布到app和小程序时，实现部分vue语法
  • uni-app和小程序有什么关系?
    • 组件标签靠近小程序规范
    • 接口能力(JS API)靠近微信小程序规范
    • 完整的小程序生命周期
  • 最佳工具的结合使用，HBuIderX +uni-app + uniCloud

1-2 入门微信小程序

1-3 搭建uni-app开发环境

1-4 uni-app开发规范

  • 页面文件遵循 Vue 单文件组件 (SFC) 规范
  • 组件标签靠近小程序规范，详见uni-app 组件规范
  • 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
  • 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
  • 为兼容多端运行，建议使用flex布局进行开发

1-5 uni-app基础语法

pages->index->index.vue页面

export default {
    /*初始化数据方法
    * 以一个对象的方式直接写数据。
    *为何不建议这种写法？——当关闭页面再次打开页面时，data中的数据会保留上次的变量值，不会被初始化。
    *将data写成一个方法以return返回一个对象的方式写数据。——能够保证每次进入页面时变量值都会刷新，重新初始化。
    data:{
        title: 'Hello'
    },
    */
    data(){
        return {
            title: 'Hello'
        }
    },
    onLoad(){
    },
    methods{
    }
}

1-6 uni-app生命周期

  • 应用生命周期
    • App.vue页面中使用
  • 页面生命周期
    • pages文件夹中的业务页面
  • 组件生命周期
    • 在components文件夹中的页面(符合vue组件规范)使用
    • uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。

1-7 uni-app平台配置

  1. 微信小程序
  • 设置
    • 打开HBuilderX 点击"工具"—"设置"—"运行配置"—"小程序运行配置"
  • 运行
    • 打开HBuilderX 点击"运行"—"运行到小程序模拟器"
  1. 连接安卓设备
  • 设置 image.png
  • 运行
    • 打开HBuilderX 点击"运行"—"运行到手机或模拟器"
  1. 连接iOS模拟器
  • 设置 如果没有正常显示ios模拟器，则需要安装(必须是Mac笔记本)
    • 打开Xcode软件 点击"Preferences偏好设置" —— 倒数第三个标签"Components"下选择iOS模拟器。
  • 运行
    • 打开HBuilderX 点击"运行"—"运行到手机或模拟器" image.png

1-8 uni-app目录结构

  1. ┌─uniCloud ：云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
  2. ├─uni_modules - 存放uni_module规范的插件。
  3. ├─wxcomponents 存放小程序组件的目录
  4. │─components 自定义组件
  5. │ └─comp-a.vue
  6. ├─hybrid App端存放本地html文件的目录
  7. ├─platforms 存放各平台专用页面的目录
  8. ├─pages 业务页面存放目录
  9. │ └─index
  10. │ └─index.vue
  11. ├─static 静态文件资源
  12. ├─utils 公用的工具类
  13. ├─common 公用的文件
  14. ├─main.js Vue初始化入口文件
  15. ├─App.vue 应用配置 用来配置App全局样式以及监听 应用生命周期
  16. ├─manifest.json 项目配置 应用名称、appid、logo、版本等打包信息
  17. ├─pages.json 页面配置 路由、导航条、选项卡等页面类信息
  18. ├─readme.md 项目说明
  19. └─uni.scss uni-app内置的常用样式变量
  • 安装scss编译器
    • 打开HBuilderX 点击"工具"—"插件安装"—"前往插件市场安装"—"scss/sass编译"—"导入插件"

第2章 云开发平台

2-1 uniCloud 云开发平台

  • 用javascript开发前后台整体业务
  • 非H5(小程序和App)，免域名使用服务器
  • 对于敏捷性业务，完整不需要前后台分离
  • uniCloud的开发流程
    • 创建一个uni-app的项目
    • 选择一个对应的云开发环境
    • 编写项目代码
    • 写在一个云函数中
    • 把云函数上传部署到阿里云或者腾讯云的serverless环境中
    • 客户端调用云函数
  • uniClound构成
    • 云函数
    • 云数据库
    • 云存储和CDN

2-2 HBuilderX中配置uniCloud环境

image.png

image.png

image.png

数组中有至少一个元素通过回调函数的测试就会返回true；

avatar
文章
阅读
粉丝