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

简介: 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": "我的"
        }
      ]
  },


1425695-20200104204757311-1800860152.png

相关文章
|
1月前
create-react-app配置环境变量
create-react-app配置环境变量
98 0
|
1月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
1月前
|
移动开发
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
405 0
|
1月前
|
Java 关系型数据库 数据库
Android App连接真机步骤与APP的开发语言和工程结构讲解以及运行实例(超详细必看)
Android App连接真机步骤与APP的开发语言和工程结构讲解以及运行实例(超详细必看)
46 0
|
9月前
|
测试技术 Android开发 Python
运行App脚本报错Method has not yet been implemented,怎么办?一文讲清
运行App脚本报错Method has not yet been implemented,怎么办?一文讲清
125 0
|
1月前
|
XML Java 测试技术
『App自动化测试之Appium应用篇』| 元素定位工具Appium-Inspector从简介、安装、配置到使用的完整攻略
『App自动化测试之Appium应用篇』| 元素定位工具Appium-Inspector从简介、安装、配置到使用的完整攻略
349 3
|
1月前
|
小程序 Android开发 iOS开发
uni-app 安装与配置
uni-app 安装与配置
20 1
|
1月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
1月前
|
安全 定位技术 网络安全
禁止应用在模拟器上运行的方案及app安全问题
禁止应用在模拟器上运行的方案及app安全问题
64 1
|
1月前
|
Web App开发 JSON 小程序
苹果app开发apple-app-site-association文件配置
apple-app-site-association 是苹果的配置文件,用于建立app和网站关联,支持Universal Links,使点击网站链接能直接打开相应app内部页面。配置文件为JSON格式,需上传至服务器`.well-known`目录或根目录。通过检查三个链接来测试配置,确保Content-Type为`application/json`。成功配置后,点击链接能在iPhone备忘录或Safari中直接唤起app,但可能有24-48小时延迟。
178 6