介绍

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

微信小程序可以用原生开发或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>

使用uniapp开发的第一个微信小程序相关推荐

普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
golang+uniapp 开发的一套微信小程序电商系统
caoguohttps://github.com/xxjwxc/caoguo 功能微信小程序电商平台后台开发语言 golang gmsechttps://github.com/gmsec/gmse ...
uniapp 开发app，唤醒微信小程序支付
<template><view v-cloak><u-button shape="circle" @click="submit" ...
微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
【微信小程序】基于Java+uniapp框架开发的全开源微信小程序商城系统
应用介绍基于Java+uniapp框架开发的全开源微信小程序商城系统,前端采用目前主流的uniapp框架开发,后端采用Java语言开发,前后端代码全部开源,减少重复造轮子,支持小程序商城秒杀.优惠券 ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...

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

介绍