uni-app开发微信小程序系列之--初体验Alpha版比正式版更新频率更高，新功能会优先在alpha版上发布。 Alp

学前必备基础

前端CSS, HTML, JavaScript
了解Vue.js
了解小程序

什么是Uniapp?

Union Application
前端框架
基于Vue.js
开发规范同小程序
一套代码即可编译至IOS Android H5 小程序等多个平台

uni-app官网: uniapp.dcloud.net.cn/

为什么要使用Uniapp?

同一套代码编译多端
接近原生, 效果更好
开发效率高
开发(人力/维护/时间)成本低
学习成本低
支持npm与自定义组件
社区活跃, 版本迭代快

开发工具HBuilderX

官方地址: www.dcloud.io/hbuilderx.h…
下载,安装,配置
Hello world

下载&安装HBuilderX

这里我选择安装正式版标准版, 大家可以按需安装自己需要的版本

正式版和Alpha(标准版)的区别

Alpha版比正式版更新频率更高，新功能会优先在alpha版上发布。
Alpha独立于正式版，建议电脑上保持正式版和alpha 2个版本，不要互相覆盖。
Alpha和正式版各自有独立的升级机制，不会互相影响。
Alpha和正式版共用相同的用户配置，如主题、快捷键设置、代码块设置。但插件需要各自安装。
Alpha和正式版能同时启动一个。先开启正式版，再启动alpha版会激活已经开启的正式版。反之亦然。

Hello world

创建项目

打开HBuilderX, 选择"文件" -> "新建" -> "项目"

这里我选择官方提供的"uni-app" 默认模板, 并输入项目名称,然后点击"创建".

创建完成后, 即可看到如下图左侧的目录结构

打开"page/index.vue"文件, 可以看到示例代码和vue单文件组件基本一致, 只是多一个"onLoad()"函数.

<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'
		}
	},

使用Chrome浏览运行的效果

如何看到编译后的效果呢?点击此处的"运行"按钮

然后选择"Chrome运行(C)-[hello]"

此时编辑器会帮忙进行编译, 并自动打开浏览器窗口运行代码.

打开本地开发环境的地址, 即看到如下效果

使用微信web开发者工具来浏览运行的效果

选择HBuilderX菜单栏中的"工具" => "设置", 选中"运行设置", 找到"微信开发者工具路径"配置栏

安装好微信开发者工具后, 将安装路径配置进去即可.

微信开发者工具初始配置

在安装好微信开发者工具后, 打开工具, 并修改以下两点配置.

将调试基础库设置为 2.3.0版本以上, 这里我设置为2.9.5(如下图所示)
开启服务端口, 这样HBuilderX即可以通过命令行的方式打开微信开发者工具了.

配置好以上两项后, 可以通过"运行", 选择"微信开发者工具(W)-[hello]", 效果图如下:

至此, 一个简单的demo示例微信小程序环境就搭好了.

下一节: uni-app开发微信小程序系列之--框架基础

uni-app开发微信小程序系列之--初体验