小程序码

先看目前已开发的效果图



这个是主页面，主要提供各类军事类新闻，让战友了解我国军队的

相关讯息，重温军旅峥嵘岁月，在新的岗位不忘初心，砥砺前行。

相关信息取自国内各大媒体，具有代表性和典型性。

此部分内容暂未实现，构思的主要菜单功能有如下：

互联网+创业项目

职业技能培训

政策解读通道

就业招聘

自主创业

军旅公益

战友基金

军盟

战友商城

等功能模块，目前还未完成动态事件功能，在后续学习中，进一步开发完善。

项目代码部分

首页用到瀑布流布局，目前新闻内容是取自各大媒体报道，由于是初步版本，新闻内容是硬编码写入js文件中动态生成。

index.wxml

<view class="main">
  <view wx:for="{{columns}}" class="column">
    <view wx:for="{{item}}" class="column_item" wx:for-item="pics">
      <image src="{{pics.pic}}" class="column_pic" mode="widthFix" /> <!--从后台数据中加载照片和标题-->
      <text class="colum_text">{{pics.title}}</text>
    </view>
  </view>
</view>
<view class="hide">  <!--在页面上放一个隐藏区域，并用image组件去加载图片资源-->
  <image wx:for="{{tempPics}}" src="{{item.pic}}" bindload="loadPic" binderror="loadPicError" data-index="{{index}}" />
</view>

index.wxss

page {
  background: #eee;
}
.main {
  display: flex;  /*弹性布局*/
  align-items: flex-start;
}
.column {
  width: 50%;
}
.column_item {
  width: 350rpx;
  background: #fff;
  margin: 30rpx auto;
  box-shadow: 5rpx 5rpx 10rpx 0 rgba(0, 0, 0, 0.3);
}
.column_pic {
  display: block;
  width: 350rpx;
  height: 350rpx;
}
.hide {
  display: none;
}
.colum_text{
  display: block;
  text-overflow: ellipsis;
  word-wrap: break-word;   /*是让文字自动换行*/
  padding : 5px;
  color: rgb(136, 135, 135);
  font-size: 13px;
}

index.js

Page({
  //不需要渲染到wxml的数据存储在jsData中
  jsData: {
    columnsHeight: [0, 0], //记录两边加载的长度
    isLoading: false  
  },
  data: {
    columns: [
      [],  
      []
    ],
    tempPics: []
  },
  //获取图片尺寸数据
  loadPic: function(e) {
    var that = this,   //将this进行保存，后面使用that,
      data = that.data, 
      tempPics = data.tempPics,
      index = e.currentTarget.dataset.index  //获取照片索引
    if (tempPics[index]) {  //以固定宽度进行等比缩放，计算高度
      tempPics[index].height = e.detail.height * 750 / e.detail.width //以750为宽度算出相对应的高度
      tempPics[index].isLoad = true //将此照片记录为已加载
    }
    that.setData({  //将数据进行存储
      tempPics: tempPics
    }, function() {
      that.finLoadPic()
    })
  },
  //图片加载错误处理
  loadPicError: function(e) {
    var that = this,
      data = that.data,
      tempPics = data.tempPics,
      index = e.currentTarget.dataset.index
    if (tempPics[index]) {
      //如果图片加载出错，则显示为一个正方形
      tempPics[index].height = 750
      tempPics[index].isLoad = true
    }
    that.setData({
      tempPics: tempPics
    }, function() {
      that.finLoadPic()
    })
  },
  //判断图片是否加载完成
  finLoadPic: function() {
    var that = this,
      data = that.data,
      tempPics = data.tempPics,
      length = tempPics.length,
      fin = true
    for (var i = 0; i < length; i++) {
      if (!tempPics[i].isLoad) {
        fin = false
        break
      }
    }
    if (fin) {
      wx.hideLoading()
      if (that.jsData.isLoading) {
        that.jsData.isLoading = false
        that.renderPage()
      }
    }
  },
  //渲染到瀑布流
  renderPage: function() {
    var that = this,
      data = that.data,  //从data中获取图片数据
      columns = data.columns,
      tempPics = data.tempPics,
      length = tempPics.length,
      columnsHeight = that.jsData.columnsHeight, //获取已经加载的高度
      index = 0
    for (var i = 0; i < length; i++) {
      index = columnsHeight[1] < columnsHeight[0] ? 1 : 0  //判断那边长度短，就将图片加载在哪边
      columns[index].push(tempPics[i])  //将图片放入短的一端
      columnsHeight[index] += tempPics[i].height  //更新加入此图片之后的高度
    }
    that.setData({
      columns: columns,
      tempPics: []
    })
    that.jsData.columnsHeight = columnsHeight
  },
  //加载数据
  loadData: function() {
    var that = this
    if (!that.jsData.isLoading) {
      wx.showLoading()
      that.jsData.isLoading = true
      setTimeout(function() {
        var pics = [] 
        pics.push({  
          pic: 'http://n.sinaimg.cn/sinacn20191122ac/223/w1280h543/20191122/ecb0-iittafr1696888.jpg',
          title: "武警部队转央企 将军出任部级董事长(图)"
        })
        pics.push({
          pic: 'http://www.people.com.cn/mediafile/pic/GQ/20180108/4/12984236936287253532.jpg',
          title: "2018中国军队新年开训全景大扫描"
        })
        pics.push({
          pic: 'http://www.gstwx.com/uploadfile/2020/0304/20200304081653701.jpg',
          title: "致敬！这就是疫情面前的人民军队"
        })
        //插入一张无法加载的图片
        pics.push({
          pic: 'http://n.sinaimg.cn/translate/20170801/KtY--fyinvwu4299226.jpg',
          title: "中国军队近期频频走出国门，太高调了吗？"
        })
        pics.push({
          pic: 'http://www.people.com.cn/mediafile/pic/GQ/20180108/4/12984236936287253532.jpg',
          title: "国防部：中国军队邀请外军派员参加阅兵式"
        })
        pics.push({
          pic: 'https://5b0988e595225.cdn.sohucs.com/images/20190225/df6ecdf3f6a44292872881d32f9fb048.jpeg',
          title: "中国军队版海报来袭，每一张都可以拿来做壁纸！"
        })
        pics.push({
          pic: 'http://img3.cache.netease.com/photo/0001/2016-10-09/C2TUTB8400AO0001.jpg',
          title: "日防相视察联合国维和部队 "
        })
        pics.push({
          pic: 'https://news.hunnu.edu.cn/_mediafile/www/2014/06/13/26r654vyoa.jpg',
          title: "武警部队优秀大学生干部先进事迹报告会在我校举行"
        })
        pics.push({
          pic: 'https://n.sinaimg.cn/sinakd2020619s/320/w2048h3072/20200619/615a-ivffpcs5816194.jpg',
          title: "从戎报国今朝有我:战略支援部队篇|报国|部队]战略_新浪新闻"
        })
        pics.push({
          pic: 'http://n.sinaimg.cn/sinacn20116/213/w2048h1365/20190801/593a-iaqfzyv8365376.jpg',
          title: "战略支援部队某部举行晋升军衔仪式"
        })
        pics.push({
          pic: 'http://img3.cache.netease.com/photo/0001/2015-08-27/B216QUBO00AP0001.jpg',
          title: '探访阅兵礼炮部队 每天拉栓上千次'
        })
        pics.push({
          pic: 'https://p2.img.cctvpic.com/photoworkspace/2019/10/02/2019100213175870725.jpg',
          title: '战略支援部队方队融合跨越，凝聚新力量'
        })
        pics.push({
          pic: 'http://p5.itc.cn/q_70/images03/20200918/16feaebd0db448099a972b88b2ad2092.jpeg',
          title: '国务院新闻办发布《中国军队参加联合国维和行动30年》白皮书'
        })
        pics.push({
          pic: 'https://file.fcios.com/ueditor/jsp/upload/image/20200619/1592499647068.jpeg',
          title: '从戎报国 今朝有我：武警部队篇'
        })
        that.setData({
          tempPics: pics  //将数据赋值给data
        })
      }, 1000)
    }
  },
  onLoad: function() {
    this.loadData()
  },
  onReachBottom: function() {
    this.loadData()
  },
})

自定义底部导航栏实现

app.json

{
  "pages": [ 
    "pages/index/index",   
    "pages/sms/sms",      
    "pages/logs/logs",
    "pages/addressBook/addressBook" 
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "爱迷彩", 
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {    //自定义底部菜单栏
    "color": "#999",
    "selectedColor": "#3D98FF",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "pages/imag/home_selected.png", //菜单被选中的时候的照片
        "iconPath": "pages/imag/home.png",   //菜单未被选中的时候照片
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "pages/imag/message_selected.png",
        "iconPath": "pages/imag/message.png",
        "pagePath": "pages/addressBook/addressBook",
        "text": "消息"
      },
      {
        "selectedIconPath": "pages/imag/service_selected.png",
        "iconPath": "pages/imag/service.png",
        "pagePath": "pages/sms/sms",
        "text": "服务"
      }
    ]
  }
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;} 
page{
  background: rgba(250,250,250,1);
  font-family:PingFangSC-Regular,PingFang SC;
}

服务页面

sms.wxml

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/>
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap='方法暂未实现'>搜索</view>
        </view>
    </view>
    <view class='mowei'>
      <view class='wodedingdan'>
        <image src='../imag/fengche.png'></image>
        <view class='ziti'>战友动态</view>
      </view>
      <view class='wodedingdan'>
        <image src='../imag/location.png'></image>
        <view class='ziti'>附近战友</view>
      </view>
      <view class='wodedingdan'>
        <image src='../imag/club.png'></image>
        <view class='ziti'>战友部落</view>
      </view>
    </view>
    <view class="menu">
      <view>
        <image src="../imag/club.png"></image>
        <text class="txt1">dddddddd</text>
      </view>
    </view>
</view>

sms.wxss

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}
.mowei{
  display: flex;
  width: 100%;
  font-size: 32rpx;
  margin-top: 50rpx;
 }
.wodedingdan{
 width: 130rpx;
 text-align: center;
 font-size:13px;
 flex-grow: 1;  /* 均匀分布属性 */
} 
.wodedingdan image{ 
 width: 70rpx;
 height: 70rpx;
}
.ziti{
 margin-top: 10rpx;
}
.menu{
  height: 40px;
  display: flex;
  align-items: center;
}
.menu image{
  width: 25px;
  height: 25px;
  margin: 5px;
}

sms.json

{
  "usingComponents": {},
  "navigationBarTitleText": "战友圈"   /*修改服务页面的标题为战友圈*/
}

刚刚开始学微信小程序，这个项目会持续更新，此项目是本科期间和战友一起所想的项目，所以想通过学习微信小程序把之前的想法进行落地实现，能够为广大战友带去一些更简单，更方便，更快捷的服务模式，在全社会大力倡导军人优先的大背景下，为曾经为祖国国防服役的最可爱的人带去温暖，国家在推动军人安置问题的工作进程中，仍面临区域性、地域性、政策软对抗等诸多问题，为政府整合社会资源解决退伍士兵安置问题造成了很大障碍。对于退役军人而言，面对“就业难”、“生活难”、“发展难”、“缺技术”、“缺平台”的“三难两缺”问题，面对融入社会的重重障碍，此项目可以为广大退役军人所面对的问题带来一种不同的解决方案。

由于是刚开始学小程序开发，技术还需进一步成长，目前版本并未实现动态事件功能，其他功能会在后续迭代中进一步开发完善并持续更新，敬请期待。