uniapp项目

213 阅读1分钟

新建uniapp项目 点击新建 项目 uni-app 基础模板就创建好了一个项目

image.png

image.png

把项目运行到微信开发者工具中 找到manifest.json打开找到微信小程序配置 把小程序id粘贴进去

image.png

2.在HBuildex中,配置'微信开发者工具'的安装路径
找到工具-> 运行配置 -> 配置路径

image.png

3.在微信开发者工具中,通过设置->安全设置 开启微信开发者工具的服务端口号

image.png

  4.在HBuildex中,点击菜单栏中运行->运行到小程序模拟器->微信开发者工具,将当前uni-app项目编译之后,自动运行到微信开发者工具中
 
 5."checkSiteMap":false
  

image.png

tabbar配置

  选择新建页面,pages.json中把index.vue这一项删除,配置tabBar,list
  

image.png

修改导航条的样式效果

1.打开pages.jsonz这个全局配置文件
2.修改globalStyle
  

uniapp中配置网络请求

 在外部资源管理器打开 初始化一个 npm init -y
 1.安装 npm install @escook/request-miniprogram
 2.导入 
 import { $http } from '@escook/request-miniprogram'
 uni.$http = $http 
 3.请求拦截器
 $http.beforeRequest=function(options){
     uni.showLoading({
     title:'数据加载中...'
     })
 }
 4.相应拦截器拦截器
 $http.afterRequest=function(options){
     uni.hideLoading() 
 }
  

image.png

**uniapp中配置分包**   
     
     首先在manifest.json配置
         "mp-weixin" : {
    "appid" : "wxf17a27ad4148c5b4",
    "setting" : {
        "urlCheck" : false
    },
    "usingComponents" : true
},

image.png

  在pages.json中配置分包
  选择新建页面 配置分包
  

image.png

  **uniapp中封装弹框的方法**       
  
  在main.js

image.png

image.png

**uniapp中**