工欲善其事,必先利其器,首先我们需要安装HbuilderX、微信小程序开发者工具,根据官方文档的介绍下载安装即可。接下来我们将在HbuilderX中进行编码,在微信小程序开发者工具中运行预览等。
使用HbuildX新建一个项目。 打开Hbuilder->文件->新建->项目 然后点击创建,创建成功,你会看到一个如下的项目目录。
pages
业务页面文件存放的目录
components
组件存放目录
static
存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
unpackage
打包目录,存放各个平台的打包文件
App.vue
应用配置,用来配置App全局样式以及监听 应用生命周期
main.js
Vue初始化入口文件
mainfest.json
配置应用名称、appid、logo、版本等打包信息,详见
pages.json
配置页面路由、导航条、选项卡等页面类信息,详见
uni.scss
这里是uni-app内置的常用样式变量
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循Vue单文件组件规范
- 组件标签靠近小程序规范,详见uni-app组件规范
- 接口能力(JS API)靠近微信小程序规范,但需要前缀wx替换为uni,详见uni-app接口规范
- 数据绑定及事件处理同
vue.js
规范,同时补充了APP及页面的生命周期 - 为兼容多端运行,建议使用flex布局进行开发
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "实时资讯",
"navigationBarBackgroundColor": "#00B2EE",
"h5": {
"pullToRefresh": {
"color": "#7D26CD"
}
}
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "Hello Lemon"
}
}, {
"path": "pages/user/user",
"style": {
// "navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#63B8FF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/message/message",
"iconPath": "static/image/tabbar/grid.png",
"selectedIconPath": "static/image/tabbar/grid_active.png",
"text": "新闻"
}, {
"pagePath": "pages/index/index",
"iconPath": "static/image/tabbar/list.png",
"selectedIconPath": "static/image/tabbar/list_active.png",
"text": "首页"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/image/tabbar/me.png",
"selectedIconPath": "./static/image/tabbar/me_active.png",
"text": "我"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "Hello",
"navigationBarBackgroundColor": "#228B22",
"backgroundColor": "#3CB371",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light"
},
"condition": {
"current": 0,
"list": [{
"name": "详情页",
"path": "pages/detail/detail",
"query": "id=80"
}]
}
}
完成页面骨架,创建如下目录及文件 然后运行在内置浏览器如下: 初次运行在微信小程序模拟器时需要做简单的配置:
- 在微信小程序开发者工具中,进入设置->安全设置,打开服务端口。
- 在Hbuilder中需要进入工具菜单->设置,点击运行配置,找到小程序配置,添加你的微信开发者工具安装路径,(形如:D:/Program File/xxx/微信web开发者工具),然后运行在小程序模拟器即可。
在iconfont下载字体图标文件包放于项目static目录,如下: 此时使用图标,直接运行会报错: ModuleNotFoundError: Module not found: Error: Can't resolve './iconfont.ttf?t=1642659690020' 解决:需要修改字体图标引入路径如下
// static/fonts/iconfonts.css
@font-face {
font-family: "iconfont"; /* Project id 1498941 */
src: url('~@/static/fonts/iconfont.woff2?t=1642659690020') format('woff2'),
url('~@/static/fonts/iconfont.woff?t=1642659690020') format('woff'),
url('~@/static/fonts/iconfont.ttf?t=1642659690020') format('truetype');
}
需要安装scss/sass编译插件。如果HbuilderX自动安装成功的话,那么恭喜你,不需要看后面的安装方法了。 HbuilderX中安装总是安装失败的话,建议下载zip包手动加到plugins,参考官方介绍。 下面介绍我的安装踩坑历程: 下载插件ZIP,解压将文件夹放到Hbuilder安装目录下的plugins目录,然后重启HbuilderX运行项目,报错: 执行日志提供的三条指令后启动依然报错。 然后,根据提示手动下载缺失文件win32-ia32-72_binding.node,下载binding.node 根据提示在D:\install\HBuilderX.3.3.5.20211229\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor中创建win32-ia32-72目录,将下载的.node文件改名为binding.node并放到该目录,最后重启运行scss编译成功。
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(2.8.1+) |
onPageNotFound | 页面不存在监听函数 |
onThemeChange | 监听系统主题变化 |
onLoad\onReady不会多次触发,onShow、onHide会多次触发。 了解更多...
因每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
支持的文件
- .vue
- .js
- .css
- pages.json
- 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
注意:
- 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ;
- 条件编译APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE没什么区别,为了简写后面出了APP-NVUE ;
- 使用条件编译请保证编译前和编译后文件的正确性,比如json文件中不能有多余的逗号;
- VUE3 需要在项目的 manifest.json 文件根节点配置 "vueVersion" : "3"
除了支持单个平台的条件编译外,还支持多平台同时编译,使用 || 来分隔平台名称。
CSS中的条件编译: pages.json 的条件编译: 只有运行至 App 时才会编译进去。
- Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持ifios、ifAndroid代码块,可方便编写判断。
- 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
- 有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。
更多...
navigator
可直接跳转至普通页面(非TabBar页面),若跳转至TabBar页面需添加属性值open-type="switchTab"
<navigator url="../detail/detail?id=6&name=lemon" >跳转至详情页Switch</navigator>
<navigator url="../message/message" open-type="switchTab">跳转至TabBar中的新闻页-></navigator>
<navigator url="../detail/detail" open-type="redirect">跳转至详情页Redirect-></navigator>
navigateTo
可直接跳转至普通页面(非TabBar页面),若跳转至TabBar页面需用switchTab
。
toDetailPage(){
uni.navigateTo({
url:'../detail/detail?id=6&name=lemon'
})
},
toNewsPage(){
uni.switchTab({
url:'../message/message'
})
},
redirectToDetailPage(){
// 关闭当前页面,跳转到应用内的某个页面。
uni.redirectTo({
url:'../detail/detail'
})
}
列表页(上一页):
<navigator url="../detail/detail?id=6&name=lemon" >
跳转至详情页Switch
</navigator>
详情页(下一页):
// 获取上一页传入的数据
onLoad(options) {
console.log(options) //{id: "6", name: "lemon"}
},
父传子:通过props 子传父:$emit 兄弟组件传值:uni.$on和uni.$emit 更多内容...
例如:日历组件uni-calendar 进入下载&导入组件页面,点击使用HbuilderX导入组件。 导入成功,即可使用。