文章目录
前言
小插曲
首页滑动图文功能与布局
小图标格子布局
原创投稿功能与布局
颜值签名功能与布局
推荐签名功能与布局
分享功能超简单的使用
个人中心-我的句子
总结
前言
不管工作还是生活，我们都会面对各种各样的挑战和压力以及困难迷茫，所以学会释放压力对于我们每一个人而言都是非常重要，有些小伙伴会通过运动的方式释放压力，有些会美美的吃上一顿来释放压力，也有些可能会听上一首歌、打一会游戏、刷一会某短视频，甚至是看上一本，更有的是看一场幽默搞笑电影。而小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;
}
个人中心-我的句子
【效果】
总结
整体下来，功能还是比较简单的，没什么复杂的地方，也就颜值和推荐签名那里的图片生成稍微复杂点，在后台图文叠加合成的时候。小伙伴们，看完是不是觉得小程序分分钟做出来，哈哈哈，是的，我相信有些小伙子确实挺厉害，也希望有更多的小伙伴创造一些有趣好玩的小程序出来！
欢迎小伙伴前来挑战原创一句子，也许那有能量的句子会给你不一样的惊喜
小程序《句子能量》