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的方式打开

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

微信小程序的方式打开

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

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

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

保存

再到微信开发平台

拿到端口号,再去hbuilderx

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

然后接下来就是启动了

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

要是想运行到手机上预览

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进行判断就行