微信完整版小程序开发之表情包小程序，前端+后台源码

前言：

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

准备：

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();

        //主页banner
        List<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);
    }

    @Override
    protected 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=',
    })
  },

  //点击主页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=' + 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 = 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);
  }
})

小程序工具截图：

部分小程序截图：