使用uniapp开发的第一个微信小程序

介绍

微信推出小程序后持续火热，使用方便，不占手机容量，这成为了小程序最大的优势。小程序的使用轻便赢得了大批用户的青睐，很多商家为了运营自己店铺也推出了自己的小程序。对于个人开发者而言，小程序可以通过插入广告赚钱广告费，是实现知识变现的途径。小程序的好处这么多，为何不自己尝试开发一款属于自己的小程序呢！既能锻炼自己又能赚零花钱，废话不多说，立马行动起来。

微信小程序可以用原生开发或uniapp开发，当然原生开发性能好，且稳定。但是uniapp可以编译成微信小程序、百度小程序、抖音小程序等，这种跨平台编译能力是uniapp的优势，为开发者省去很大的学习成本。如果不是开发特别大的项目，我还是建议直接学习uniapp，毕竟程序员的时间很宝贵，要利用有限的时间，学习最有价值的技术，可以用最短的时间去获取收益！

开发背景

博主有一定的前后端开发经验，所以学习uniapp没花多少时间，开发这个微信小程序只是为了快速掌握小程序开发部署流程，为以后开发更好的产品积累经验。

技术栈

前端：uniapp
后端：.Net WebApi
数据库：Mysql
服务器：Windows

微信小程序

本篇文章就不讲解开发流程了，毕竟是本博主第一款小程序，掌握的还不够深入，希望和各位大佬多多交流学习！

项目源码和mysql数据库资源

uniapp源码
mysql数据库资源

二维码

小程序已经发布到微信小程序平台了，大家可以试玩一下，让周公带你探索梦境！

首页

<template>
	<view class="container">
		<view class="main-title">
			<image class="main-image" src="@/static/dream.png" mode="widthFix"></image>
			<view class="main-title-info">周公解梦</view>
		</view>
		<view class="body-search">
			<uni-search-bar v-model="searchTitle" placeholder=" " @input="getDreamTitleList" bgColor="#f0ecdf"
				clearButton="none" cancelButton="none">
				<template v-slot:searchIcon>
					<view style="color: #F0AD4E;font-weight: bold;font-size: 20px;">梦见</view>
				</template>
			</uni-search-bar>
			<uni-list v-show="showTitleList" :border="false" class="title-list">
				<uni-list-item clickable @click="gotoDreamDetial(value.id)" :border="false"
					v-for="(value, key) in titleListData" :key="key" class="title-list-item">
					<template v-slot:header>
						<view style="display: flex;">
							<image style="align-items: center;width: 30px;border-radius: 50%;" src="@/static/dream.png"
								mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:body>
						<view style="padding-left: 10px;">梦见{{value.title}}</view>
					</template>
				</uni-list-item>
			</uni-list>
			<view class="title-tip">{{titleTip}}</view>
		</view>
		<view class="title-like">
			<uni-section title="猜你想问" type="line" titleFontSize="15px">
				<view  class="like-change">
					<uni-tag @click="getDreamTitleRandomList()" text="换一换"   :circle="true"
						custom-style="background-color:  #F0AD4E; border-color:  #F0AD4E; color:  #000000;">
					</uni-tag>
				</view>
				<view class="like-list">
					<view class="like-list-item" v-for="(value, key) in titleRandomListData" :key="key">
						<uni-tag @click="gotoDreamDetial(value.id)" :text="value.title" :circle="true"
							custom-style="background-color: #f0edcc; border-color: #f0edcc; color:  #000000;">
						</uni-tag>
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

模糊查询

解梦详情

<template>
	<view class="container">
		<uni-card  is-full>
			<text class="uni-h6">{{dreamData.foreword}}</text>
		</uni-card>
		<uni-section title="通用解释" type="line">
			<uni-list >
				<uni-list-item  v-for="(value, key) in dreamData.generalExplains" :key="key" >
					<template v-slot:body>
						<view style="font-size: 13px;line-height:16px">梦见{{value}}</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section v-show="dreamData.psychologyDream.title!=null" title="心理学解梦" type="line">
			<uni-list >
				<uni-list-item  >
					<template v-slot:body>
						<view style="font-size: 13px;line-height:16px">心理分析：{{dreamData.psychologyDream.psychologyAnalysis}}</view>
					</template>
				</uni-list-item>
				<uni-list-item  >
					<template v-slot:body>
						<view style="font-size: 13px;line-height:16px">梦境解说：{{dreamData.psychologyDream.psychologyExplain}}</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section v-show="dreamData.caseDream.title!=null" title="案例分析" type="line">
			<uni-list >
				<uni-list-item  >
					<template v-slot:body>
						<view style="font-size: 13px;line-height:16px">梦境描述：{{dreamData.caseDream.dreamDescribe}}</view>
					</template>
				</uni-list-item>
				<uni-list-item  v-for="(value, key) in dreamData.caseDream.dreamExplains" :key="key" >
					<template v-slot:body>
						<view style="font-size: 13px;line-height:16px">梦境解析：{{value}}</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
	</view>
</template>