开始第一个基于uni-app的微信小程序开发

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

uni-app官网链接: https://uniapp.dcloud.io/

开发工具

  1. HBuilderX: 点击下载
  2. 微信开发者工具:调试预览工具。点击下载

创建uni-app项目

  1. 文件–>新建–>项目在这里插入图片描述
  2. 创建项目,选择uni-app,定义自己的工程名称,可以选择模板,也可以选择默认,按后点击创建。在这里插入图片描述
  3. 创建的项目目录如下所示在这里插入图片描述

运行项目

  1. 在运行之前,我们需要打开微信开发者工具,打开设置–>安全设置–>开启服务端口。在这里插入图片描述
  2. 创建完毕以后可以运行,点击菜单栏中的运行,选择运行方式,我们可以选择浏览器运行,也可以选择手机模拟器进行真机运行调试,在这里我们使用小程序模拟器运行,选择微信开发者工具。在这里插入图片描述 在这里插入图片描述
  3. 这这里我们需要注意一点就是我们第一次使用小程序模拟器的微信开发者工具需要自己配置我们本地的微信小程序的位置。在这里插入图片描述在这里插入图片描述
  4. 做好以后我们可以运行到微信开发者工具了。

页面显示以及调试

在这里插入图片描述
到这里我们第一个小程序就创建完毕了。

猜你喜欢

转载自blog.csdn.net/qq_44922113/article/details/106773591