资讯专栏INFORMATION COLUMN

uniapp 的基础

wqj97 / 767人阅读

摘要:的基础要方便使,最好先下个,这个是官方推荐的,很多东西都集成界面化操作的先从网上拿个开源项目做示范吧地址下载好后配置安装命令安装依赖这个项目其实已经集成了很多东西了就可以看

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的转换

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/122090.html

相关文章

  • Java 初学者做第一个微信小程序总结--关于Java基础

    摘要:官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署,在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年,目前已经工作了2年,因为自学,基础差,所以打算年末总结一下常见的基础知识和面试点; 也可以通过独立做一个项目整合自己工作期间学习的知识,加深印象。 但是想着回家或是平时手机用的多,做一款APP和小程序很方便查看。 项目展示 本...

    mudiyouyou 评论0 收藏0
  • uniapp table 组件

    摘要:最近在捣鼓项目,恰好用到组件,之前写了个,后面一直都想写一个像样的,可以分享给别人用的组件。自己的水平一般,开发出来的组件可能代码不咋地,还望路过大神斧正。 uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具,支持ios android wap,小程序,除了android有点卡外,其他暂时没有发现什么瑕疵。 最近在捣鼓uniapp项目,恰好用到table组件,之前...

    Vultr 评论0 收藏0
  • 小程序/uniapp支持css选择器一览

    摘要:本次测试主要参考文档为选择器参考手册主要是安卓微信小程序的选择器兼容入坑小程序过程中看到微信对支持的选择器的描述只有六个分别是但是看到给写的花里胡哨的的库还有各种花里胡哨的小程序并且还表明支持之前各种无的库所以我觉得事情并没有这么简单趁着元 本次测试主要参考文档为w3school CSS 选择器参考手册 (主要是安卓/ios/微信小程序的css选择器兼容) 入坑uniapp/小程序过...

    MockingBird 评论0 收藏0

发表评论

0条评论

wqj97

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<