uniapp 的基础

要方便使uniapp，最好先下个HBuildertX，这个是uniapp官方推荐的，很多东西都集成界面化操作的

先从网上拿个开源项目做示范吧

https://github.com/stavyan/TinyShop-UniApp

git地址：https://github.com/stavyan/TinyShop-UniApp.git

下载好后配置

// 安装yarn命令
npm i -g yarn
// 安装依赖
yarn

这个项目其实已经集成了很多东西了,package.json就可以看

{
  "name": "TinyShop-UniApp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "lint": "vue-cli-service lint",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "commit": "git pull && git-cz",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "lint:fix": "eslint --ext .js,.vue src -c .eslintrc.js --fix",
		"release": "release-it",
		"vue:lint": "vue-cli-service lint",
		"vue:lintfix": "vue-cli-service lint --fix"
  },

H5的方式打开

image-20211010153346791

image-20211010153431812

直接在浏览器中打开,没问题

微信小程序的方式打开

先下个微信开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

然后新建一个微信小程序项目,记得他的AppID(这个每个人的测试号都不一样)

image-20211010153701906

创建之后微信项目后,在hbuilderX中找到src/manifest.json,

image-20211010153900789

保存

再到微信开发平台

image-20211010154059588

image-20211010154114069

拿到端口号,再去hbuilderx

image-20211010154327555

image-20211010154356035

输入刚才得到的端口号和微信开发工具的路径

然后接下来就是启动了

image-20211010154511780

image-20211010154642303

点击后微信开发工具会自动弹出来

image-20211010154752878

要是想运行到手机上预览

image-20211010154902314

bug:

因为各个小程序浏览器的内核不一样,有些css无法读取到就很操蛋.但是js是没问题的,经过es6\es5的转换

H5需要代理+跨域，小程序不需要，需要的是全名

就小程序像普通的一样写相对路径，然后vue.config.js写

  devServer: { // 包含关系
    proxy: {
      '/flower': {
        // target: 'http://www.xingxingyihuo.cn:8081',
        target: 'http://xxxx:8080',
        changeOrigin: true
      }
    }
  },

这种的，但是！微信小程序不用，所以就是微信小程序他请求就真的就是请求127.0.0.1:8080/flower而没有走转发了，所以在请求这里要进行判断，如果是小程序的话就补全请求，h5的话就用相对路径请求

判断当前是什么环境

如果是用我自己的那个gitee模板来做的话，每次运行打包的都带一个环境变量了

"scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5 --report",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --report",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },

直接用process.env.UNI_PLATFORM进行判断就行

# vue.js # uni-app
Logo
松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐

cover

【Jenkins】Pipeline流水线语法解析全集 -- 脚本式流水线、groovy语法

avatar 松山湖开发者村综合服务平台
cover

网络安全（黑客）—-2024自学手册

avatar 松山湖开发者村综合服务平台
cover

医院门诊互联电子病历|基于SSM＋vue的医院门诊互联电子病历管理信息系统的设计与实现(源码+数据库+文档)

avatar 松山湖开发者村综合服务平台