零基础微信完整版小程序开发之微信表情包小程序前端+后台源码（java）

前言：

现在小程序越来越火，由于个人兴趣爱好平时喜欢斗图，然后就有了这个小程序的开发计划，这篇文章主要介绍自己开发一款小程序经验也踩过的坑。

准备：

1，域名和服务器（域名必须要申请https）阿里云，腾讯云，七牛都有免费ssl证书可以下载自己可以搭建，我用的是腾讯云的。

2，后台开发提供数据接口小程序调用（我后台是用的开源后台自己修改的技术是Springboot）

3，注册一个小程序账号（这里就不多说了，注册地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=）

4，下载小程序开发工具登录账号搭建自己的小程序。

小程序组件以及开放api大家可以上去多学习学习：https://developers.weixin.qq.com/miniprogram/dev/api/

后端开发：

我后端主要用java编写，不过你也可以用其他语言，主要看你自己选择。后台主框架为Springboot+mybatis，开发工具idea，服务器用的腾讯云，开发好后台直接打成war包发布到服务器上面。

pom.xml 依赖

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>${mybatis-springboot-version}</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>${druid-version}</version></dependency><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>${quartz-version}</version><exclusions><exclusion><groupId>com.mchange</groupId><artifactId>c3p0</artifactId></exclusion></exclusions></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>${commons-lang-version}</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>${commons-fileupload-version}</version><exclusions><exclusion><artifactId>commons-io</artifactId><groupId>commons-io</groupId></exclusion></exclusions></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>${commons-io-version}</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>${commons-codec-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><groupId>commons-configuration</groupId><artifactId>commons-configuration</artifactId><version>${commons-configuration-version}</version></dependency><dependency><groupId>org.aspectj</groupId><artifactId>aspectjrt</artifactId><version>${aspect-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>${aspect-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>${shiro-version}</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>${shiro-version}</version></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>${httpclient-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><groupId>net.sourceforge.nekohtml</groupId><artifactId>nekohtml</artifactId><version>${nekohtml-version}</version><!--$NO-MVN-MAN-VER$--></dependency><dependency><artifactId>velocity</artifactId><exclusions><exclusion><artifactId>commons-lang</artifactId><groupId>commons-lang</groupId></exclusion></exclusions><groupId>org.apache.velocity</groupId><version>${velocity-version}</version></dependency><!--腾讯云图片上传需要--><dependency><groupId>com.qcloud</groupId><artifactId>cos_api</artifactId><version>${qcloud-version}</version><exclusions><exclusion><artifactId>slf4j-log4j12</artifactId><groupId>org.slf4j</groupId></exclusion></exclusions></dependency><!--七牛云上传图片--><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>[7.2.0, 7.2.99]</version></dependency><dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.59</version></dependency><dependency><groupId>dom4j</groupId><artifactId>dom4j</artifactId><version>1.6</version></dependency><dependency><groupId>org.jdom</groupId><artifactId>jdom</artifactId><version>2.0.2</version></dependency><dependency><groupId>com.thoughtworks.xstream</groupId><artifactId>xstream</artifactId><version>1.4.9</version></dependency></dependencies>

后台项目目录：

小程序主页数据接口：

@RequestMapping("/getBiaoQingInfo")public R getBiaoQingInfo() {//小编推荐List<BiaoqingbaoEntity> xbbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(0);for (BiaoqingbaoEntity bq:xbbiaoqing) {bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath());}//热门推荐List<BiaoqingbaoEntity> hotbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(1);for (BiaoqingbaoEntity bq:hotbiaoqing) {bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath());}//真人表情List<BiaoqingbaoEntity> zrbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(2);for (BiaoqingbaoEntity bq:zrbiaoqing) {bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath());}//主页热门关键字List<BiaoQingBaoTipsEntity> biaoqingtips = biaoQingbaoTipsService.getBiaoQingTipsAll();//主页bannerList<BiaoQingBanner> banner_list = biaoQingbaoTipsService.getBiaoQingBannerList();Map<String, Object> result = new HashMap<String, Object>();result.put("xbbiaoqing", xbbiaoqing);result.put("hotbiaoqing", hotbiaoqing);result.put("zrbiaoqing", zrbiaoqing);result.put("biaoqingtips", biaoqingtips);result.put("bannerList", banner_list);result.put("success", true);return R.ok(1,result);}

springboot的入口程序:

@SpringBootApplication
public class DpApplication extends SpringBootServletInitializer {public static void main(String[] args) {SpringApplication application = new SpringApplication(DpApplication.class);application.setBannerMode(Banner.Mode.OFF);application.run(args);}@Overrideprotected SpringApplicationBuilder configure(SpringApplicationBuilder application) {application.bannerMode(Banner.Mode.OFF);return application.sources(DpApplication.class);}}

后台部分截图:

小程序部分

主界面 index.wxml

<!-- 推荐 -->
<view class='main_app'><swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">    <view wx:for="{{bannerList}}" wx:for-index="index" wx:for-item="item" wx:key="item" data-keyword="{{item}}"bindtap="banner_btn">    <swiper-item>    <image src="{{item.url}}" class="slide-image" mode="aspectFill" /></swiper-item>    </view>
</swiper> <view class="wxSearch-section"><view class="wxSearch-pancel"><input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value=""  bindblur="wxSearchBlur" class="wxSearch-input" placeholder="请输入表情关键词"/><button class="wxSearch-button"  bindtap="wxSearchFn" size="mini" plain="true">搜索</button></view>
</view><!-- 热搜关键字 -->
<loading hidden="{{loadingHidden}}">加载中...
</loading><view class="list-item"><view class="hot-tips-pancel"><view class='left_hr'></view><view class="hot_tips_text">热门搜索</view><view class="hot_tips_text-more" bindtap="huanyihuan">换一换</view></view>
<view class='tips-view'><view wx:for="{{biaoqingtips}}" wx:for-item="item" wx:key="item" class="search-keyword-item" data-keyword="{{item}}" bindtap="searchByKeyword">{{item.biaoqingTips}}</view>
</view></view>  <!--小编推荐 start -->
<view class="list-item">
<view class="layout_vertical"><view class="hot-tips-pancel"><view class='left_hr'></view><view class="hot_tips_text">小编推荐</view><view class="hot_tips_text-more" bindtap='xiaobian_btn_more'>更多>></view></view><view class="hot-tips-pancel-image"><view wx:for="{{xbbiaoqing}}" wx:for-item="item" wx:key="item" data-keyword="{{item}}" bindtap="image_btn_info"><view class='image_kuang_right'><view><image class="image-kuan"  src="{{item.thrid_image_path}}"></image></view><view class='bqb_tips'>{{item.title}}</view></view></view></view></view>
</view>
<!--end--><!--热门推荐 start -->
<view class="list-item"><view class="layout_vertical"><view class="hot-tips-pancel"><view class='left_hr'></view><view class="hot_tips_text">热门推荐</view><view class="hot_tips_text-more" bindtap='hot_btn_more'>更多>></view></view><view class="hot-tips-pancel-image"><view wx:for="{{hotbiaoqing}}" wx:for-item="item" wx:key="item" data-keyword="{{item}}" bindtap="image_btn_info"><view class='image_kuang_right'><view><image class="image-kuan"  src="{{item.thrid_image_path}}"></image></view><view class='bqb_tips'>{{item.title}}</view></view></view></view></view>
</view>
<!--end--><!--热门推荐 start -->
<view class="list-item"><view class="layout_vertical"><view class="hot-tips-pancel"><view class='left_hr'></view><view class="hot_tips_text">真人表情</view><view class="hot_tips_text-more" bindtap='zhenren_btn_more'>更多>></view></view><view class="hot-tips-pancel-image"><view wx:for="{{zrbiaoqing}}" wx:for-item="item" wx:key="item" data-keyword="{{item}}" bindtap="image_btn_info"><view class='image_kuang_right'><view><image class="image-kuan"  src="{{item.thrid_image_path}}"></image></view><view class='bqb_tips'>{{item.title}}</view></view></view></view></view>
</view>
<!--end--></view>

主页index.js

//index.js
var app = getApp()
Page({data: {bannerList: '',search_value: '',biaoqingtips:'',hotbiaoqing: '',xbbiaoqing: '',zrbiaoqing: '',loadingHidden: true,},wxSearchInput:function(e){this.setData({search_value: e.detail.value})},//真人表情zhenren_btn_more: function(e) {wx.navigateTo({url: '../seach_detail/seach_detail?types=2&search_value=',})},//小编推荐xiaobian_btn_more: function(e) {wx.navigateTo({url: '../seach_detail/seach_detail?types=0&search_value=',})},//点击主页热门hot_btn_more: function(e) {wx.navigateTo({url: '../seach_detail/seach_detail?types=1&search_value=',})},//点击主页bannerbanner_btn: function(e) {var names = e.currentTarget.dataset.keyword.names;console.info(names);wx.navigateTo({url: '../seach_detail/seach_detail?type=&search_value=' + names,})},//搜索wxSearchFn: function (e) {wx.navigateTo({url: '../seach_detail/seach_detail?search_value=' + this.data.search_value,})},//点击关键字searchByKeyword: function (e) {var name = e.currentTarget.dataset.keyword.biaoqingTips;wx.navigateTo({url: '../seach_detail/seach_detail?search_value=' + name,})},//热门图片点击image_btn_info: function (e) {//console.info(e.currentTarget);var image_info = e.currentTarget.dataset.keyword.thrid_image_path;wx.navigateTo({url: '../image_detail/image_detail?image_info=' + image_info,})},//点击换一换huanyihuan: function (e) {//获取远程数据var that = thiswx.request({url: getApp().data.servsers+'/dp/sys/web/getBiaoQingInfo',method: 'GET',data: {},header: {'Accept': 'application/json'},success: function (res) {console.log(res);that.setData({biaoqingtips: res.data.biaoqingtips,hotbiaoqing: res.data.hotbiaoqing,xbbiaoqing: res.data.xbbiaoqing,zrbiaoqing: res.data.zrbiaoqing,bannerList: res.data.bannerList})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//显示加载数据this.setData({loadingHidden: false});//获取远程数据var that = thiswx.request({url: getApp().data.servsers+'/dp/sys/web/getBiaoQingInfo',method: 'GET',data: {},header: {'Accept': 'application/json'},success: function (res) {console.log(res);that.setData({loadingHidden: true,biaoqingtips: res.data.biaoqingtips,hotbiaoqing: res.data.hotbiaoqing,xbbiaoqing: res.data.xbbiaoqing,zrbiaoqing: res.data.zrbiaoqing,bannerList: res.data.bannerList})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},loadingTap: function () {this.setData({loadingHidden: false});var that = this;setTimeout(function () {that.setData({loadingHidden: true});that.update();}, 3000);}
})

小程序工具截图：

部分小程序截图：