微信小程序制作过程记录（一）每日新闻

 首先呢，还是要通过这个网址，你去注册一个公众号的账户，这个当然是必须的啦

 介绍一下uniapp

UniApp是一个基于Vue.js的跨平台开发框架，可以同时开发运行在多个平台（包括iOS、Android、H5、小程序等）的应用程序。它提供了一套统一的开发语法和组件库，使得开发者可以在不同的平台上使用相同的代码进行开发，并且能够充分利用各个平台的原生能力。

以下是UniApp的一些主要特点：

1. 跨平台：使用UniApp可以编写一套代码，同时发布到iOS、Android、H5、小程序等多个平台。这样可以大幅减少开发工作量，提高开发效率。

2. 基于Vue.js：UniApp采用了Vue.js作为其核心框架，开发者可以使用熟悉的Vue语法进行开发。Vue.js是一种轻量级的JavaScript框架，易于学习和使用，并且具有良好的社区支持。

3. 兼容性强：UniApp在各个平台上均有良好的兼容性，可以处理各种屏幕尺寸和设备特性。同时，UniApp还提供了一系列的API和插件，以便开发者能够方便地使用原生功能和第三方库。

4. 组件库丰富：UniApp提供了丰富的组件库，包括常用的视图组件、表单组件、导航组件等。这些组件可以在不同的平台上进行良好的展示和交互，并且支持自定义样式和扩展。

5. 调试工具友好：UniApp提供了便捷的调试工具，可以在开发过程中实时预览和调试应用程序。开发者可以通过模拟器或真机进行实时调试，快速定位和修复问题。

总而言之，UniApp是一个强大的跨平台开发框架，基于Vue.js，能够帮助开发者快速构建并发布在多个平台上运行的应用程序。它具有高效性、兼容性和易用性等优点，适用于各种类型的应用开发，是目前流行的多平台开发解决方案之一。

开始学习uni-app

 之后是一个视频介绍

 

微信小程序，原生sdk

 各取所长

 

 

介绍一下mpvue 

Mpvue 是一个基于 Vue.js 的小程序开发框架，它将 Vue.js 的开发体验和优势引入到了微信小程序开发中。Mpvue 采用了类似于 Vue 的模板语法和组件化开发方式，能够让开发者使用 Vue 的技术栈进行小程序的开发。

以下是 Mpvue 的一些主要特点：

1. 轻量高效：Mpvue 构建在 Vue 的基础之上，借助 Vue 的虚拟 DOM 和响应式系统，提供了高效的渲染和数据驱动能力。同时，Mpvue 运行时的体积也相对较小，不会增加过多的负担。

2. 同时支持小程序和 Web：Mpvue 可以将 Vue 代码编译成小程序的 WXML、WXSS 和 JS 文件，并且可以在小程序环境中运行。它还可以将同一份代码编译成符合浏览器标准的 HTML、CSS 和 JS 文件，从而在 Web 端运行。

3. 支持 Vue 生态：Mpvue 支持使用 Vue 生态中的大部分特性和插件，包括 Vue Router、Vuex、Vue Loader 等。这意味着开发者可以直接迁移或共享一部分代码和经验，提高开发效率。

4. 渐进增强：Mpvue 提供了一些扩展特性用于支持小程序的原生能力，例如小程序的 API 调用、页面路由和跳转、页面生命周期等。开发者可以通过这些特性直接调用小程序底层的功能，以满足更复杂的开发需求。

5. 社区活跃：Mpvue 拥有一个活跃的开发者社区，提供了丰富的教程、示例和插件，方便开发者学习和解决问题。此外，由于 Mpvue 是开源框架，任何人都可以参与贡献代码，为框架的改进和发展做出贡献。

总结来说，Mpvue 是一个基于 Vue.js 的小程序开发框架，它结合了 Vue 的开发体验和小程序的原生能力，使得开发者可以使用熟悉的 Vue 技术栈进行小程序的开发。Mpvue 具有轻量高效、支持小程序和 Web、支持 Vue 生态等特点，适用于各种规模的小程序项目，并且拥有一个活跃的开发者社区，为开发者提供了丰富的资源和支持。

 

        好了，看完了这个视频，其实就是说uniapp真的很好，最大的感受就是它解决了目前多端的一个问题，之后，它还可以保留各家之长，然后，它的使用比较简单，vue的语法，之后用的是微信的体系（这里可能描述不准确，但是大概就是这个意思）

立马下了一个HBuilder

就是按照他的来 

按照他的示例来看，跟着做就是这样啦，上面是它的层次结构 

接着就是跟着它的教程走就可以了

 感觉解压和安装的这个过程真的还是比较慢的

这里是想看看网页端是什么情况

 关于如何打包​​​​​​

详细的还是可以看说明文档本身

计算机中脚手架指的是什么意思

在计算机科学中，脚手架（Scaffold）是指一种为了快速启动和搭建项目而提供的基础结构和工具的代码或模板。它包含了一个项目的基本目录结构、配置文件、依赖项等，在项目初始化时可以自动生成这些基础代码和文件，从而加速项目的开发过程。

脚手架通常是一种用于生成特定类型项目的工具，可以根据项目需求定制化。它可以提供一些预置的功能和模块，例如路由配置、数据库连接、用户认证等，使得开发者可以更专注于业务逻辑的实现，而不必从头搭建整个项目的基础结构。

脚手架一般会提供命令行接口或图形界面，开发者可以通过简单的命令或交互式操作来创建项目。当执行创建项目的命令后，脚手架会自动下载所需的依赖项、生成项目文件，并进行一些初始化配置，以便开发者能够立即开始工作。

脚手架在开发中起到了快速搭建和规范项目结构的作用，能够减少重复性的工作，提高开发效率，并且帮助确保项目的一致性和可维护性。常见的脚手架工具有Vue CLI、Create React App、Angular CLI等，它们针对不同的前端框架提供了相应的项目脚手架。另外，后端开发也有一些脚手架工具，如Express Generator、Ruby on Rails等。

目前来跟着实战演练一个news项目

跟着创建一个项目

之后，测试一下demo

 

 在这个里面是我们的前端页面展示部分

这节课使用到的一个api

 这个ulistMedia有点小离谱，是他自定义的但是不说

 

<template>
	<view class="content">
		<view class="uni-list-cell"hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
		<view class="uni-media-list">
		<image class="uni-media-list-logo":src="item.img"></image>
		<view class="uni-media-list-body">
		<view class="uni-media-list-text-top">{{item.title}}</view>
		<view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

 这是它那个自定义的，我看网上其他人的博客给的，我一弄上去老是报错，自己改了一下，之后就好了。

然后，这里大家可能是会遇到一个问题就是给你报错，

微信小程序那里，跟你讲你用的是游客模式，很多东西你使用是受限的。

打开你注册的小程序，之后按照我标注的，去复制一下你的小程序ID，

 随后把它复制过来

就可以正常使用啦

 

 我们点击到终端就可以其从api中获取到的信息，也就是今日的新闻啦

 按照任课人员的手法，我们基本可以得到一个新闻页面

 

查看控制台返回的当前目标的信息 

自己在弄这个不同新闻返回对应的不同id值这里弄了半天真的是没有想到呢

 

 

标题弄出来了 

 这个它的API中的这个富文本，不仅支持字符串还支持数组

 

这个condition写的还是不错的

到时候测试的时候会比较方便

 

 

<template>
	<view class="content">
		<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>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news : []
			};
		},
		onLoad:function(){
			uni.showLoading({
				title:"加载中...."
			})
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					this.news = res.data;
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			openinfo(e) {
				var newsid = e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url: '../info/info?newsid='+newsid
				});
			}
		},
	}
</script>

<style>
.uni-media-list-body{height: auto;}
.uni-media-list-text-top{line-height:1.6em;}
</style>

 

<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<view class="art-content">
			<rich-text class="richText" :nodes="strings"></rich-text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				strings :''
			}
		},
		onLoad:function(e){
			console.log(e);
			 uni.request({
			 	url: ' https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,
			 	method: 'GET',
			 	data: {},
			 	success: res => {
					console.log(res);
					this.title= res.data.title;
					this.strings = res.data.content;
				},
			
			 	fail: () => {},
			 	complete: () => {}
			 });
			}
		}
</script>

<style>
.content{padding: 10upx 2%; width: 96%;flex-wrap: wrap;}
.title{line-height: 2em;font-weight: 700 ;font-size: 38upx;}
.art-content{line-height: 2em;}
</style>

 

缓冲区管理