项目结构
分类介绍
1 Pages
页面文件夹，里面有很多文件夹（页面） 文件夹里面有以.vue格式结尾的文件如index.vue
2 main.js
项目入口
3 page.json
配置文件
4 manifest.json
HBX独有配置页面
5 App.vue
根组件
里面有小程序的生命周期
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
main.js启动会调用App.vue
index.vue
此处写法同微信小程序开发工具语法，通过模版插值的方式显示值
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="">
{{message}}
</view>
</view>
</template>
此处写法同vue写法，同样通过模版插值传递值
<script>
export default {
data() {
return {
title: '第一个uniapp程序',
message:'今天开始学习uniapp'
}
},
onLoad() {
},
methods: {
}
}
</script>
page.json
上半部分优先级大于下半部分
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "第一个uniapp程序"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "第一个uniapp程序",
"navigationBarBackgroundColor": "#CCFF00",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
如何在微信小程序开发者工具中运行uniapp项目
HBX
运行->运行到小程序模拟器->选第一项《微信开发者工具》->配置微信开发者工具所在目录
微信开发者工具->设置->安全设置->打开服务端口选项
HBX内置浏览器与微信开发者工具运行效果对比（上为HBX下为微信开发者工具）
