学前班的必备基础是什么？

uni-app官网：/

为什么要使用它？ 下载并安装开发工具

这里我选择安装官方标准版。 您可以根据需要安装您需要的版本。

正式版和（标准版）创建项目的区别

打开，选择“文件”->“新建”->“项目”

这里我选择官方的“uni-app”默认模板，输入项目名称，点击“创建”。

创建完成后可以看到如下图左侧所示的目录结构

打开“page/.vue”文件，可以看到示例代码与vue单文件组件基本相同，只是多了一个“()”函数。

<template> <view class="content"> <image class="logo" src="/static/logo.png">image> <view class="text-area"> <text class="title">{{title}}text> view> view> template> <script> export default { data() { return { title: 'Hello world' } }, onLoad() { }, methods: { } } script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } style>

修改代码：

data() { return { title: 'Hello James Zhang' } },

使用运行效果

如何查看编译后的效果？ ​​点击此处的“运行”按钮

然后选择“运行(C)-[]”

此时，编辑器将帮助编译并自动打开浏览器窗口来运行代码。

打开本地开发环境的地址，会看到如下效果

使用微信网页开发者工具浏览运行效果

在菜单栏中选择“工具”=>“设置”，选择“运行设置”，找到“微信开发者工具路径”配置栏

安装完微信开发者工具后，配置安装路径即可。 微信开发者工具初始配置

安装微信开发者工具后，打开工具，修改以下两项配置。

设置调试基础库为2.3.0以上版本，这里我设置为2.9.5（如下图）

打开服务端口，以便可以通过命令行打开微信开发者工具。

配置好以上两项后，就可以使用“运行”，选择“微信开发者工具(W)-[]”。 效果图如下：

至此，一个简单的demo示例微信小程序环境已经搭建完毕。

下一篇：微信小程序系列uni-app开发-框架基础