【uni-app】10分钟,让项目跑起来

381 阅读2分钟

新人村

  • 获得工具 —— 开发文档、下载编辑器、插件市场
  • 使用工具 —— 运行demo
  • 走出新人村 —— 导入工程、真正的项目跑起来
获取工具

你会vue,上手uniapp就很简单。学习一门语言或者技术,最好的途径就是官方网站,官网文档以及案例分析。这就好比买家秀与卖家秀,看看买家秀真实的使用心得,更加符合实际应用。

  1. 官方文档 uni-app 官网

  2. 编辑器 (开发uniapp就得下载这个软件,但是它真的不好用) HBuilderX

    优点:uniapp相关跨平台的打包、调试、配置以及自身框架的支持友好

    缺点:git提交(得配合小乌龟使用),不如webstrom内置的git 搜索不如webstrom、不能查看某个方法的来源(这点最不能忍受!!!简直痛苦不堪)

3.额外的帮手 (内置组件,扩展组件不够用的时候就得额外找其他插件了) 插件市场

使用工具

下载了HBuildx,就可以用起来了

1.新建项目(可以选择hello uniapp 一个小demo先跑起来,看着代码实际跑起来) image.png

  1. 实际项目的全家桶
  • uni-app 内置了 Vuex
  • 也可以安装UView 这样第三方UI框架
  • 用的vue语法(支持vue2.0、vue3.0)
  • 还有nvue(在 App 端,如果使用 vue 页面,则使用 webview 渲染;如果使用 nvue 页面(native vue 的缩写),则使用原生渲染)
  • 路由、缓存(这些后续都可以查阅官方文档)
走出新人村

如果是已有项目,新人第一天接触uniapp 如何跑起来

  • 导入工程 image.png

  • 打开对应的cmd(控制台),npm i (uniapp 也是需要运行的)

image.png

  • 点击运行(拿微信小程序来说,一定要在运行配置里面配置微信小程序安装路径,不然不能自动打开微信开发者工具ide)

image.png

image.png

  • 打开微信开发者(这里需要自己新建项目)

image.png

最重要的一张图!!!!!!微信开发者工具 新建项目-选择文件地址-选到 Unpackage/dist/dev/mp-weixin

image.png

这样就差不多运行起来了~~~~~~~~

总结

后面会陆续分享遇到的坑,使用方法、解决问题。 已经有支付宝小程序、微信小程序、安卓应用的上线产品