uniapp(一) 之 小程序与uniapp 基础

 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 i OS 、 Android 、 Web （ 响应式）、 以及各种小程序（微信 / 支付宝 / 百度 / 头条 / 飞书 /QQ/ 快手 / 钉 钉 / 淘宝）、 快应用等多个平台。即使不跨端， uni-app 也是更好的小程序开发框架。

uni-app官网https://uniapp.dcloud.net.cn/基本语言和开发规范

为了实现多端兼容，综合考虑编译速度、 运行性能等因素， uni-app 约定了如下开发规范： 页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个 . vue 文件 组件标签靠近小程序规范，详见 uni-app 组件规范

接口能力（ JS API ） 靠近小程序规范，但需将前缀 wx 替换为 uni ， 详见 uni-app 接口规范 数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期 如需兼容 app-nvue 平台，建议使用 flex 布局进行开发

 flex布局

.box{
    flex-direction : row | row-reverse | column | column-reverse;
}

总结： uniapp = vuejs 的语法 + 小程序的标签和 API

跨端原理

uni-app 分编译器和运行时（ runtime ） 。 uni-app 能实现一套代码、 多端运行，是通过这 2 部分配合完成的 。 编译器将开发者的代码进行编译，编译的输出物由各个终端的 runtime 进行解析，每个平台 （ Web 、 Android App 、 i OS App 、 各家小程序）都有各自的 runtime 。

工具准备

• HbuilderX
• 微信开发者工具
• 微信小程序Appid

一、微信小程序

微信小程序，简称小程序，英文名 Mini Program ， 是一种不需要下载安装即可使用的应用，它实现了应用 “触手可及” 的梦想，用户扫一扫或搜一下即可打开应用。

微信小程序就是一个内嵌在微信 app 里面的网页应用，和普通的网页应用相比，可以借助微信 app 这个宿主 环境，调用一些原生的 api 和微信生态系统的信息。

微信公众平台https://mp.weixin.qq.com/

二、开发前准备

• 注册微信小程序

https://mp.weixin.qq.com/wxopen/waregister?action=step1

• 安装微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• 文件目录查看 

 

 

• 如何在模拟器里面查看页面

1. 方式一：app.json中配置pages文件
2. 方式二：从调试模式中更改启动页面

三、微信开发相关基础知识

• 结构

组件：view text

• 样式：

wxss样式文件：可以用web中css语法写页面样式

• 行为

JS代码交互模式，需求：点击按钮，弹出一个信息提示

JS中 Page是小程序页面加载时执行的一个函数，由小程序内部提供，可以接受一个对象作为参数，对象里面可以定义页面的数据，页面的时间作为回调函数，还可以定义生命周期函数等。

微信小程序没有传统的dom开发模式，基于我们vuejs react这类的数据驱动开发模式，无需dom操作

bindtap用于事件绑定，类似onclick

• 数据

插值表达式显示：基本数据显示+四则运算+条件判断+三元三目表达式+ECMAScript相关api+js文件定义的方法

在小程序里面，数据不建议直接修改，因为直接修改不会实现数据的响应变化，页面不会随着data变化而变化，必须使用小程序里面的api

this.setData({
    age:this.data.age+1;
})

• 生命周期函数

on前缀的方法都是内置的生命周期函数

onLoad,onReady,onShow,onHide

• 全局数据globalData缓存
• 小程序可以使用npm