个人小程序，从功能和布局小小讲解下，一个自带能量的小可爱，风里雨里，依然在这里等你

文章目录

前言
小插曲
首页滑动图文功能与布局
小图标格子布局
原创投稿功能与布局
颜值签名功能与布局
推荐签名功能与布局
分享功能超简单的使用
个人中心-我的句子
总结

前言

       不管工作还是生活，我们都会面对各种各样的挑战和压力以及困难迷茫，所以学会释放压力对于我们每一个人而言都是非常重要，有些小伙伴会通过运动的方式释放压力，有些会美美的吃上一顿来释放压力，也有些可能会听上一首歌、打一会游戏、刷一会某短视频，甚至是看上一本，更有的是看一场幽默搞笑电影。而小5我，喜欢有能量的一句话，翻看一起抄写的句子，依然能给我力量以及鼓励。
       有时候，一句话会给我们带来无限的能量和鼓励，即使再大的压力和迷茫，也会得到释放，前进的道路也会变得清晰！所以，以前看到一句很触动内心的句子都会抄写在自己的笔记本里，也会写一些鼓励的句子。
       很喜欢小5自己写的一句话：人生里，谁又何曾不是超人的模样
       因此，重点来啦，既然句子那么有力量，加上我自己也是一枚程序员，我为何不写一个小程序，将句子放在上面，与大家分享呢！
       所以，分享原创一句子或一段话个人小程序就这样诞生了，由于是个人类目，所以小程序的功能不多，只有句子的展示和投稿功能，也就是所谓的信息查询类目。
       小程序整个开发均使用的是本身标签和控件，没有使用到UI框架之类的，当然，你们都尝试接触那些优秀的UI框架，这里我是通过自己的理解去布局和实现。

小插曲

       由于个人小程序是不能有信息发布的功能，当时小程序加了一个给大家输入一句话，然后进行随机抽选上榜的功能，后面进行小程序升级后，审核员说这个功能涉及到信息发布的情况，个人类目不允许，没有通过，所以干脆就把这个功能改成原创一句子投稿功能，还特别说明我这里只是一个添加入口，没有即时添加即时显示的情况（也就是发布），所有数据都由后台来控制显示，然后进行一番明确描述后，小程序才通过了审核。

首页滑动图文功能与布局

【效果】

【关键代码】

数据循环方法 - js部分

const imgUrls = {};
res.data.l.forEach(function (item, index) {
    imgUrls[`imgUrls[${index}]`] = {
        itemIndex: index,
        bgUrl: item.imagePath,
        text: item.textContent,
        fromWhere: item.textFrom
    }
});
that.setData(imgUrls);

布局 - wxml页面部分
这里滑动图文，主要是用了swiper组件，已经封装好的一个滑动组件，直接使用即可，相对于web页面端来说，确实省了好多，符合编程原则“写的少做的多”，Less Write Do More!

<!--滑动图片-->
<view id='swiperBox' class='swiper-box' style="background:#fff;">
  <swiper 
  indicator-dots="{{true}}" 
  autoplay="{{autoplay}}" 
  interval="{{interval}}" 
  duration="{{duration}}" 
  bindchange="swiperChange">
    <swiper-item wx:for="{{imgUrls}}" wx:key="{{index}}">
      <view wx:if="{{imgUrlsIndex[index]!='1'}}" style="width:100%;height:300rpx;line-height:300rpx;background:#f3f3f3;text-align:center;">加载图片中</view>
      <image 
      bindload="imageMoveLoad" 
      src='{{item.bgUrl}}' width="335" height="150" mode='widthFix' class="img {{imgUrlsIndex[index]=='1'?'':'before-load'}}" data-id="{{index}}" />
      <view class='getheight' id='getheight{{index}}' style="position:absolute;top:{{topValue[index].top}};left:10%;font-size:30rpx;color:#fff;width:80%;text-align:left;text-indent:50rpx;">
        <text style="position:relative;display:block;">{{item.text}}</text>
        <text style="position:relative;display:block;text-align:right;">{{item.fromWhere}}</text>
      </view>
    </swiper-item>
  </swiper>
  <view class="dots" style="display:none;"> 
      <block wx:for="{{imgUrls}}" wx:key="unique"> 
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> 
      </block> 
  </view>
</view>

1）这里的图片用到一个bingload方法，就是当图片加载完成后才显示，默认图片未加载完全时，默认显示如下提示-加载图片中

2）默认是有指示点的，如下图（小5这里用了自己自定义的指示点）
通过swiper属性indicator-dots的false和true来是否开启

3）自定义指示点，样式就可以自己定义了

小图标格子布局

【效果】

【关键代码】

<view style="display:flex;">
	<view style="width:100%;"></view>
	<view style="width:100%;"></view>
	<view style="width:100%;"></view>
</view>

<image src="/images/public.png" mode="widthFix" style="width:100rpx;height:100rpx;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%;" role="img"></image>

1）布局主要使用到了display:flex，弹性盒子的方式，个人觉得这个布局还是非常完美的
2）第二个主要说的就是图片的显示，目的是能够完全显示，同时能够居中显示，这个当时也是参考了某些大厂前端的布局方式，然后就应用到小程序上来，发现也是完美兼容
3）这里如果想玩点花样的，那么就可以动态控制图片以及文字的显示，小伙伴们可以在自己的小程序上使用

原创投稿功能与布局

【效果】

1）很简单的一个投稿功能，句子+笔名，提交确定，整个投稿功能就完成，布局也是比较简单，UI也就将就下，哈哈哈
2）rgba进行布局透明遮罩层还是不错的，有web端布局的小伙伴，在小程序里这样实现就非常熟悉了

【关键代码】

<view style="background:rgba(0,0,0,.5)">
	<view></view>
</view>

颜值签名功能与布局

【效果】

1）布局也比较简单，就是弹出一张图文图片进行显示，也就api接口生成图片调用测颜值接口复杂点，图片文字叠加用熟悉了也简单，调用接口熟悉也快。所以，在编程这边，多练多接触多实践多做些例子是提高的最快方式，小5天赋上就稍微差点，只能通过加倍的努力方能赶上你们这些小伙子

推荐签名功能与布局

【效果】

1）布局和颜值签名一样

分享功能超简单的使用

【效果】

【关键代码】

1）个人觉得分享的标题和图片最好设置成可以后台动态设置的值
2）也可以设置好分享链接的参数

/**
 * 用户点击右上角分享
 */
onShareAppMessage:function (options){

var that = this;
var shareObj = {
　　　　	title: '这个分享标题可以自己后台动态设置',        // 默认是小程序的名称(可以写slogan等)
        path: '/pages/index/index',        // 默认是当前页面，必须是以‘/’开头的完整路径
    	imageUrl: '图片也同样最好做成动态的设置',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
　　　　success: function (res) {
　　　　　　// 转发成功之后的回调
　　　　　　if (res.errMsg == 'shareAppMessage:ok') {

　　　　　　}
　　　　},
　　　　fail: function () {
　　　　　　// 转发失败之后的回调
　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') {
    　　　　　　　　// 用户取消转发
　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') {
    　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
　　　　　　}
　　　　},
　　　　complete: function(){
　　　　　　// 转发结束之后的回调（转发成不成功都会执行）
　　　　}
　　}

　　return shareObj;
}

个人中心-我的句子

【效果】

总结

       整体下来，功能还是比较简单的，没什么复杂的地方，也就颜值和推荐签名那里的图片生成稍微复杂点，在后台图文叠加合成的时候。小伙伴们，看完是不是觉得小程序分分钟做出来，哈哈哈，是的，我相信有些小伙子确实挺厉害，也希望有更多的小伙伴创造一些有趣好玩的小程序出来！
欢迎小伙伴前来挑战原创一句子，也许那有能量的句子会给你不一样的惊喜
       小程序《句子能量》