zoukankan      html  css  js  c++  java
  • 01uni-app的创建运行在不同端上的配置 以及tarBar的配置

    uni-app的创建###

    01==>创建uni-app的项目非常简单。不需要注意什么注意点哈!!
    创建项目的时候  可以参考官网
    https://uniapp.dcloud.io/quickstart
    在使用uni-app的时候,你要创建下载huildex  和微信小程序开发者工具
    在你使用HUilderX编译的过程中第一次大概需要五分钟
    
    
    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:xxxunpackagedistdevmp-alipay,然后在HBuilderX中修改文件并保存,会自动刷新支付宝小程序开发者工具]
    
    那么怎么去启动(在你下载的工具中打开 XXX/XXX/unpackagedistdevmp-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": "我的"
            }
          ]
      },
    

  • 相关阅读:
    CommandLine
    eclipse创建java和web工程
    rabbitmq安装(ubuntu)
    vue搭建手顺
    docker配置仓库源
    spark基本概念整理
    Vue整合d3.v5.js制作--柱状图(rect)
    Vue整合d3.v5.js制作--折线图(line)
    k8s强制删除pod
    踩坑ios H5
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12150361.html
Copyright © 2011-2022 走看看