[TOC] # UniAPP Hello World项目 我们先从一段简单的脚本开始，感受一下uni-app最核心的功能，uni-app是基于Vue.js的前端框架，支持大部分的 Vue.js特性。 > 这个示例展示了uni-app的核心功能：数据的双向绑定。属性title自动显示在屏幕正中间。 * [ ] 项目：01-UniAPP Hello World * [ ] 文件：pages/home/index.vue # 第一个页 文件 ``` pages/home/index.vue ``` 代码 ```html <template> <view class="content"> <text class="title">{{title}}</text> </view> </template> <script> export default { data() { return { title: 'Hello world' } } } </script> <style> .content { flex: 1; justify-content: center; align-items: center; } .title { font-size: 36upx; color: #8f8f94; } </style> ``` ## 配置文件 文件名：page.json ```js { //pages数组中第一项表示应用启动页 "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首页", } }, { "path": "pages/home/about", "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } }], "globalStyle": { //全局设置 "navigationBarTextStyle": "black", //导航栏文本颜色 "navigationBarTitleText": "uni-app", //导航栏文本默认文字 "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色 "backgroundColor": "#F8F8F8" //页面的背景色 } } ``` ## 动手试一试 根据向导创建HelloWorld项目，修改模版生成的index.vue文件，实现上述功能。 # 添加新的页面 添加新的页面“pages/home/hello.vue”，这个示例展示了uni-app的核心功能：数据的双向绑定。通过计算属性message对属性name处理封装，在输入框内输入的内容会同步展示在页面的text标签内，如图所示。与传统的HTML不一样的是uni-app自定义了一系列的标签，最基本的view标签可以理解为HTML的div标签。 > 添加新的页面需要修改pages.json文件，参考下一节如何修改pages.json文件 首先定义data域的成员属性name ```html <script> export default { data() { return { name: 'Jack', } }, computed: { message() { return `Hello, ${this.name}`; } }, } </script> ``` 然后template节中添加一个输入框，将输入的内容通过v-model绑定到变量name。 ~~~ <input type="text" v-model="name" placeholder="你的名字" /> ~~~ 增加一个计算属性message，定义读取message返回一条消息 ```js computed: { message() { return `Hello, ${this.name}`; } }, ``` 这里的this指针指向vue实例本身。使用模版字符串构造复杂的字符串。 ```js `Hello,${this.name}` ``` 计算属性message与name属性密切相关，当name值改变的时候message自动更新。 ```html <template> <view class="content"> <view> <input type="text" v-model="name" placeholder="你的名字" /> </view> <view> <text>{{ message }}</text> </view> </view> </template> ``` * [ ] 项目：01-UniAPP Hello World * [ ] 文件：pages/home/hello.vue 第一个uni-app项目代码清单 ```html <template> <view class="content"> <view> <input type="text" v-model="name" placeholder="你的名字" /> </view> <view> <text>{{ message }}</text> </view> </view> </template> <script> export default { data() { return { name: 'Jack', } }, computed: { message() { return `Hello, ${this.name}`; } }, } </script> <style> .content { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } input { border-bottom: 1px solid; } .name { font-size: 60px; font-weight: 600; } </style> ``` > uni-app修改了 Vue.js 的 runtime 和 compiler > 实现，鉴于跨平台及App特殊需求，相比Web平台， Vue.js 在 uni-app 中使用时会存在一些差异。  微信开发者工具调试界面 ## 模式配置 在pages.js文件中约定pages数组的第一项为APP的启动页面，在开发阶段，如果要启动的页面不是第一页，例如测试某个页面，例如直接启动新建的hello页面，就必须将hello设置为第一项，这样改动起来非常麻烦，可以通过模式配置来解决。 > condition节的list数组存放多个配置的列表，索引从0开始，current属性用于设置当前启用的模式。 ```html "condition": { //模式配置，仅开发期间生效 "current": 1, //当前激活的模式（list 的索引项，从0开始） "list": [{ "name": "首页", //模式名称 "path": "pages/home/index", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "Hello", //模式名称 "path": "pages/home/hello", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 } ] } ``` ## 单页程序配置 pages.json示例文件 ```html { //pages数组中第一项表示应用启动页 //参考：https://uniapp.dcloud.io/collocation/pages "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首页", } }, { "path": "pages/home/hello", "style": { "navigationBarTitleText": "Hello!" } }, { "path": "pages/home/about", //重载全局设置 "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } } ], "globalStyle": { //全局设置 "navigationBarTextStyle": "black", //导航栏文本颜色 "navigationBarTitleText": "uni-app", //导航栏文本默认文字 "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色 "backgroundColor": "#F8F8F8" //页面的背景色 }, "condition": { //模式配置，仅开发期间生效 "current": 1, //当前激活的模式（list 的索引项，从0开始） "list": [{ "name": "首页", //模式名称 "path": "pages/home/index", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "Hello", //模式名称 "path": "pages/home/hello", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 } ] } } ```