uni |
您所在的位置：网站首页 › vue怎么写app › uni |
uni
|
「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。 安装工欲善其事，必先利其器，首先我们需要安装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插件需要安装scss/sass编译插件。如果HbuilderX自动安装成功的话，那么恭喜你，不需要看后面的安装方法了。
HbuilderX中安装总是安装失败的话，建议下载zip包手动加到plugins，参考官方介绍。
下面介绍我的安装踩坑历程：
下载插件ZIP，解压将文件夹放到Hbuilder安装目录下的plugins目录，然后重启HbuilderX运行项目，报错：
接口文档 条件注释因每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。 大量写 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"模板文件中的条件编译：
JS中的条件编译： 除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称。 CSS中的条件编译： pages.json 的条件编译: 只有运行至 App 时才会编译进去。 更多... 导航 声明式导航navigator可直接跳转至普通页面（非TabBar页面），若跳转至TabBar页面需添加属性值open-type="switchTab" 跳转至详情页Switch 跳转至TabBar中的新闻页-> 跳转至详情页Redirect-> 编程式导航：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' }) } 获取上一页URL传入的数据：列表页（上一页）： 跳转至详情页Switch详情页（下一页）： // 获取上一页传入的数据 onLoad(options) { console.log(options) //{id: "6", name: "lemon"} }, 创建组件 组件间通讯父传子：通过props 子传父：emit兄弟组件传值：uni.emit 兄弟组件传值：uni.emit兄弟组件传值：uni.on和uni.$emit 更多内容... 扩展组件应用例如：日历组件uni-calendar 进入下载&导入组件页面，点击使用HbuilderX导入组件。 导入成功，即可使用。 |
【本文地址】