一、我的第一个微信小程序

1、安装运行环境

HBuilder X 官网和软件商城均可下载
微信开发者工具也是官网下载 无脑点击下一步就ok了
uni-app开发除了div换成view 路由改为pages.json等 方法基本与Vue差不多

2、我的第一个小程序

打开HBuilder X 新建项目


这里我们先用默认的模板 名字我起的demo 创建

一🍳pages：所有的页面存放目录。
一🍳static：静态资源目录，例如图片等。
一🍳App.vue：是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
一🍳main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
一🍳manifest.json：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
一🍳pages.json：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
一🍳uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格， uni.scss文件里预置了一批scss变量预置。
除此之外还有=============================================================>
一🍳uni_modules：是uni-app的插件模块化规范（HBuilderX 3.1.0+支持，通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。
一🍳unpackage：就是打包目录，在这里有各个平台的打包文件。
一🍳index.html：基础模板入口文件。等等…

3、运行

注：微信开发者工具需设置端口号的开启。如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

这样我们的页面就可以在微信开发者工具正常运行了
做项目的过程中我们也可以像浏览器一样查看控制台Console返回参数
以及刷新页面用清除全部缓存再编译的方法
后面我们会涉及到发布 也可在详情里查看项目配置的域名信息

4、搭建小程序项目实战

这里我们用官网的案例简单搭建一个小程序 注释已经写得很详细了——(ง ••)ง ——(ง ••)ง——

<template>
	<view class="content">
	// 快捷键 ulistMedia 生成新闻样式
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="openinfo" :data-newsid="item.post_id">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.author_avatar"></image>