01uni-app的创建 运行在不同端上的配置 tarBar的配置

Posted 平凡是最美荡气回肠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了01uni-app的创建 运行在不同端上的配置 tarBar的配置相关的知识,希望对你有一定的参考价值。

uni-app的创建###

01==>创建uni-app的项目非常简单。不需要注意什么注意点哈!!
创建项目的时候  可以参考官网
https://uniapp.dcloud.io/quickstart
在使用uni-app的时候,你要创建下载huildex  和微信小程序开发者工具
在你使用HUilderX编译的过程中第一次大概需要五分钟

小程序模拟器无法预览
有些时候,
uni-app编译好了之后,
在小程序上无法点击预览(预览按钮无法点击)
此时你需要在HX上小程序上配置自己的appId


02==》运行uni-app
在浏览器中可以直接运行H5版本



03==》如何运行到小程序上
配置小程序运行的路径
我的是    E:\\开发工具\\xiaocehngxu_soft\\微信web开发者工具
如何你配置好了之后,小程序开发工具打开失败。
在微信开发工具中===》设置==》安全设置===》开启服务端口  就可以正常开启了



03-1==》在打开微信小程序后,如何设置自己的appId呢??
在【工具】===》【开发详情】====》修改   默认的appId


xxx=>如何在支付宝小程序开发者工具预览了

如果uni-app开发阿里系小程序;下载开发工具;地址: https://ding-doc.dingtalk.com/doc#/kn6zg7/zunrdk
安装过程很简单,没有过多的步骤;
然后在HX配置一下安装的路径,我觉得这一步不配置也行(针对支付宝小程序和钉钉)
因为配置了后也无法去启动;
他会提示 等待支付宝小程序开发者工具启动后,在支付宝小程序开发者工具中打开:
[C:\\xxx\\unpackage\\dist\\dev\\mp-alipay,然后在HBuilderX中修改文件并保存,会自动刷新支付宝小程序开发者工具]

那么怎么去启动(在你下载的工具中打开 XXX/XXX/unpackage\\dist\\dev\\mp-alipay)
就是说利用支付宝工具去打开HX编译好的代码;这样就可以在支付宝小程序开发者工具中预览了。
(ps==>还是配置一下支付宝小程序开发者工具的地址)



04==>  在pages.json中去配置 小程序顶部的标题 颜色  和字体等哈  这个文件pages.json是专门处理小程序的


05===》如何新创建一个页面呢
新建目录==》about==>在创建一个about.vue文件
然后去在pages.json中去配置   配置路径  顶部的样似等
{
			"path": "pages/about/about",
			"style": {
				"navigationBarTextStyle": "black",
				"navigationBarTitleText": "about",
				"navigationBarBackgroundColor": "hotpink",
				"backgroundColor": "#F8F8F8"
			}
},

如何配置tarBar##


06==>如何配置tabBar
对于tabBar的配置  跟在小程序上是一样的哈
selectedIconPath  是选中的时候的图片
iconPath是默认的时候的图片
 
"tabBar": {
      "list": [
        { 
          "selectedIconPath":"./static/home_active.png",
          "iconPath":"./static/home.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        },
        {
          "selectedIconPath": "./static/category_active.png",
          "iconPath": "./static/category.png", 
          "pagePath": "pages/about/about",
          "text": "动态"
        },
、
        {
          "selectedIconPath": "./static/profile_active.png",
          "iconPath": "./static/profile.png",
          "pagePath": "pages/person/person",
          "text": "我的"
        }
      ]
  },

以上是关于01uni-app的创建 运行在不同端上的配置 tarBar的配置的主要内容,如果未能解决你的问题,请参考以下文章

uni-app01底部导航栏与页面切换

uni-app ios运行提示appkey未配置或配置错误

uni-app 使用cli创建

配置uni-app导航栏上的搜索框

使用 CASL 和 graphql-shield 在 GraphQL 后端上的 RBAC 并与我的 React 前端共享规则

uni-app入门教程——环境配置与运行