小程序：uniapp 第一弹(开发基础必备)

小程序：uniapp 第一弹(开发基础必备)

文档地址

• 官方网址：
  • 微信小程序：https://mp.weixin.qq.com/cgi-bin/wx
  • uni：https://uniapp.dcloud.io/
  • 开发文档：地址

1. 流程

2. 开发工具

• 微信开发者工具：地址
  • 选择适合自己的版本即可
• uni 项目开发工具：
  • HBuilderX：官方IDE下载地址

3. 项目搭建

• 创建项目

  • 通过 HBuilderX 可视化界面

    • 下载App开发版，可开箱即用

  • vue-cli命令行

    • 使用cli方式创建项目，可直接下载标准版（uni-app编译插件已被安装到项目下）
    • 在点击工具栏里的文件 -> 新建 -> 项目：
      
    • 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
    • uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。
    • 日常开发推荐使用 uni ui项目模板，已内置大量常用组件。
      

4. 为什么要选择uni-app？

5. uni特点：一套代码，运行到多个平台

• 浏览器运行
  
• 真机运行
  • 连接手机，开启USB调试，进入项目
    
• 微信开发者工具里运行(适用于支付宝 | 百度 | 字节跳动 | 360开发工具 | 快应用联盟 | 华为开发者 | QQ小程序)
  • 注意：
    • 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
    • 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
      

6. 发布uni-app