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

前言：
现在小程序越来越火，由于个人兴趣爱好平时喜欢斗图，然后就有了这个小程序的开发计划，这篇文章主要介绍自己开发一款小程序经验也踩过的坑。
准备：
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 依赖

org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-aop org.springframework spring-context-support org.springframework.boot spring-boot-starter-data-redis org.springframework.boot spring-boot-configuration-processor true org.springframework.boot spring-boot-devtools true org.mybatis.spring.boot mybatis-spring-boot-starter ${mybatis-springboot-version} mysql mysql-connector-java ${mysql-version} com.alibaba druid-spring-boot-starter ${druid-version} org.quartz-scheduler quartz ${quartz-version} com.mchange c3p0 commons-lang commons-lang ${commons-lang-version} commons-fileupload commons-fileupload ${commons-fileupload-version} commons-io commons-io commons-io commons-io ${commons-io-version} commons-codec commons-codec ${commons-codec-version} commons-configuration commons-configuration ${commons-configuration-version} org.aspectj aspectjrt ${aspect-version} org.aspectj aspectjweaver ${aspect-version} org.apache.shiro shiro-core ${shiro-version} org.apache.shiro shiro-spring ${shiro-version} org.apache.httpcomponents httpclient ${httpclient-version} net.sourceforge.nekohtml nekohtml ${nekohtml-version} velocity commons-lang commons-lang org.apache.velocity ${velocity-version} com.qcloud cos_api ${qcloud-version} slf4j-log4j12 org.slf4j com.qiniu qiniu-java-sdk [7.2.0, 7.2.99] org.bouncycastle bcprov-jdk15on 1.59 dom4j dom4j 1.6 org.jdom jdom 2.0.2 com.thoughtworks.xstream xstream 1.4.9

后台项目目录：

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

文章图片

小程序主页数据接口：

@RequestMapping("/getBiaoQingInfo") public R getBiaoQingInfo() {//小编推荐 List xbbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(0); for (BiaoqingbaoEntity bq:xbbiaoqing) { bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath()); } //热门推荐 List hotbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(1); for (BiaoqingbaoEntity bq:hotbiaoqing) { bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath()); } //真人表情 List zrbiaoqing = biaoqingbaoService.getBiaoQingBaoByInfo(2); for (BiaoqingbaoEntity bq:zrbiaoqing) { bq.setThrid_image_path(tencent_image_path+"/"+bq.getFileImagePath()); } //主页热门关键字 List biaoqingtips = biaoQingbaoTipsService.getBiaoQingTipsAll(); //主页banner List banner_list = biaoQingbaoTipsService.getBiaoQingBannerList(); Map result = new HashMap(); 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); }@Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { application.bannerMode(Banner.Mode.OFF); return application.sources(DpApplication.class); }}

后台部分截图:

文章图片

文章图片

小程序部分
主界面 index.wxml

加载中... 热门搜索换一换 {{item.biaoqingTips}} 小编推荐更多>> {{item.title}} 热门推荐更多>> {{item.title}} 真人表情更多>> {{item.title}}

主页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='https://www.it610.com/article/, }) }, //小编推荐 xiaobian_btn_more: function(e) { wx.navigateTo({ url:'../seach_detail/seach_detail?types=0&search_value='https://www.it610.com/article/, }) }, //点击主页热门 hot_btn_more: function(e) { wx.navigateTo({ url:'../seach_detail/seach_detail?types=1&search_value='https://www.it610.com/article/, }) },//点击主页banner banner_btn: function(e) { var names = e.currentTarget.dataset.keyword.names; console.info(names); wx.navigateTo({ url:'../seach_detail/seach_detail?type=&search_value='https://www.it610.com/article/+ names, }) }, //搜索 wxSearchFn: function (e) { wx.navigateTo({ url:'../seach_detail/seach_detail?search_value='https://www.it610.com/article/+ this.data.search_value, }) }, //点击关键字 searchByKeyword: function (e) { var name = e.currentTarget.dataset.keyword.biaoqingTips; wx.navigateTo({ url:'../seach_detail/seach_detail?search_value='https://www.it610.com/article/+ 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 = this wx.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 = this wx.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); } })

小程序工具截图：