uniapp小程序（开发流程）

冠宇dd

已于 2024-05-21 18:04:19 修改

阅读量735

点赞数 11

文章标签： uni-app 小程序前端

于 2024-05-21 17:57:40 首次发布

本文链接：https://blog.csdn.net/2301_77676545/article/details/139098834

版权

1.如何安装，下载微信开发助手，个人B站收藏（小程序视频教程）

前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程_哔哩哔哩_bilibili
2.安装注意事项命令可能执行错误，这时候是因为vue2 和 vue3 版本的问题。可能要去路径里面去删除 vue的文件，可能写完小程序之后再写vue2项目就得删除某些文件从新安装了。（视频里前几集有详情）
C:\Users\**\AppData\Roaming\npm 关于小程序删除vue路径
3.传统 <view></view> 标签，语法可用 div 和 vue写法一致。

4.不用axios了可以用一般都是封装 request.js （视频里也有）是与src 下面的 pages 同级。

this.request({ 示例 }) 有cookie 要写请求头

//获取所有企业信息，企业id和企业名称
// 获取页面参数中的 company_id
const options = this.$root.$mp.query; // 在uni-app中获取页面参数的方式
const company_id = options.company_id;
this.request({
url:"http://服务器地址：端口号/manager/getallcompanysensor/",
header: {
'content-type': 'application/json', // 根据你的实际需要设置合适的 Content-Type
'Cookie': 'haac=21232f297a57a5a7438942123a0e4a8041fc3@0@11111111' // 替换为你登录成功后服务器返回的 Cookie
},
data: {
company_id: company_id
},
})
.then(res =>{
console.log(res)
this.data = res.data
})

// es6
export default (params)=>{

//加载中
uni.showLoading({
title:"加载中"
})

return new Promise((resolve,reject)=>{
wx.request({
...params,
success(res){
resolve(res.data)
},
fail(err){
reject(err);
},
complete(){
uni.hideLoading();
}
})
})
}

5.组件库
https://uniapp.dcloud.net.cn/
要下载 uni-ui
https://www.npmjs.com/package/@dcloudio/uni-ui
使用uni-ui的组件标签的时候要引入 (如下图)
如果不行的话就在与src同级的地方添加一个vue.config.js配置文件 (如下)

// vue.config.js
module.exports = {
transpileDependencies:['@dcloudio/uni-ui']
}

6.uniapp Alibaba的图表组件库 (都是小图片如小程序下放的图片装饰)

https://www.iconfont.cn/search/index?searchType=icon&page=1&fromCollection=-1

7.添加页面要在pages.json内添加 "tabBar" 下列代码中的"tabBar" 可以让小程序底部的几个功能实现跳转

{
   "pages": [
       {
           "path": "pages/login/index",
           "style": {
               "navigationBarTitleText": "登录"
           }
       },
       {
           "path": "pages/home/index",
           "style": {
               "navigationBarTitleText": "首页"
           }
       },
       {
           "path": "pages/equList/index",
           "style": {
               "navigationBarTitleText": "设备页面"
           }
       },
       {
           "path": "pages/equAll/index",
           "style": {
               "navigationBarTitleText": "设备详情"
           }
       },
       {
           "path": "pages/tpf/index",
           "style": {
               "navigationBarTitleText": "碳排放"
           }
       },
       {
           "path": "pages/message/index",
           "style": {
               "navigationBarTitleText": "消息"
           }
       },
       {
           "path": "pages/mine/index",
           "style": {
               "navigationBarTitleText": "我的"
           }
       },
       {
           "path": "pages/index/index",
           "style": {
               "navigationBarTitleText": "uni-app"
           }
       }
   ],
   "globalStyle": {
       "navigationBarTextStyle": "white",
       "navigationBarTitleText": "uni-app",
       "navigationBarBackgroundColor": "#000",
       "backgroundColor": "#F8F8F8"
   },
   "tabBar": {
       "color": "#8a8a8a",
       "selectedColor": "#d4237a",
       "backgroundColor": "#fff",
       "position":"bottom",
       "borderStyle": "black",
       "list": [
           {
               "pagePath": "pages/home/index",
               "text": "首页",
               "iconPath": "./static/首页.png",
               "selectedIconPath": "./static/首页.png"
           },
           {
               "pagePath": "pages/tpf/index",
               "text": "碳排放",
               "iconPath": "./static/碳排放.png",
               "selectedIconPath": "./static/碳排放.png"
           },
           {
               "pagePath": "pages/message/index",
               "text": "消息",
               "iconPath": "./static/消息.png",
               "selectedIconPath": "./static/消息.png"
           },
           {
               "pagePath": "pages/mine/index",
               "text": "我的",
               "iconPath": "./static/我的.png",
               "selectedIconPath": "./static/我的.png"
           }
       ]
   }
}