守望轩Wordpress小程序修改记录——专题页代码修改

小程序 5年前 0 2.6K 5

首先感谢一下守望轩的Jianbo大佬开源的Wordpress小程序，还有叶赫先生的WordPress版微信小程序 2.0 重构版

从17年开始接触小程序后一直在弄以微擎为后台的一些小程序（以后我也会更新一些关于以微擎为后台的小程序），后来在无意间在折腾Wordpress的时候在Github找到了这个项目，于是就开始折腾，首先是更改了一些界面上的东西，用的是原作者Jianbo的守望轩小程序，页面修改大部分根据叶赫先生的WordPress版微信小程序 2.0 重构版

这是一个开源的程序，我会在这几天更新一些关于我折腾的记录，分享给大家一起折腾 (・∀・(・∀・(・∀・*)

首先是最简单的专题页面，其实小程序的页面的wxml和样式wxss和普通的html和css样式差不多，只要你熟悉这两样东西改起来没什么大问题

只要修改topic.wxml And topic.wxss文件即可，大家在微信开发者工具里面去根据模拟器去调整一下样式

下面是我的小程序专题页面代码

wxss部分

.container {
  height: 100%;
    /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;   */
}
.topic-container{
  background-color: #fff;
}


/*topic list*/

.topic-common-list {
   padding: 24rpx; 
   margin: 0 auto;
}

.list-item {
  position: relative;
  float: left;
  /* border-bottom: 1px solid #eee; */
  overflow: hidden;
  /* clear: both;  */
  width: 100%;
   /* border: 1px solid #ccc; */
  border-radius: 8rpx;  
  margin-bottom: 60rpx;
  background: #fff;
  box-shadow:2rpx 2rpx 30rpx rgba(0, 0, 0, .2);

}

.list-item  image.cover {
  width: 100%;
  height: 340rpx;
  /* border-radius: 6rpx; */
}

.content-title {
  padding: 12rpx 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-title text {
  font-size: 30rpx;
  line-height: 30rpx;
  font-weight: bold;
  color: #1b1b1b;
}

.content-brief {
  padding: 0rpx 0rpx 30rpx 20rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #959595;
}
.topic-name {
 float: left; 
 width: 55%;
}
.topic-img {
    float: right;
    text-align: right;
    width: 40%;
    margin-right: 10rpx;
    padding-top: 10rpx;
}

.img-menu {
  width: 80rpx;
  height: 40rpx;
  display: inline-block;
  text-align: center;
   border-radius: 6rpx;
}

wxml部分

<import src="../../templates/copyright.wxml" />
<import src="../../templates/login-popup.wxml" />

<scroll-view style="height:100%;" scroll-y="true" lower-threshold="100rpx">
    <view class="topic-common-list">
        <block wx:key="id" wx:for="{{categoriesList}}">
            <view class="list-item">
                <view>
                    <image src="{{item.category_thumbnail_image}}" class="cover" data-item="{{item.name}}" data-id="{{item.id}}" bindtap="redictIndex"></image>
                </view>
                <view class="content-title" data-item="{{item.name}}" data-id="{{item.id}}" bindtap="redictIndex">
                    <view class="topic-name">
                        <text>{{item.name}}</text>
                    </view>
                    <view class="topic-img">
                        <image src="../../images/{{item.subimg}}" data-subflag="{{item.subflag}}" data-id="{{item.id}}" catchtap="postsub" class="img-menu"></image>
                    </view>
                </view>
                <view class="content-brief" data-item="{{item.name}}" data-id="{{item.id}}">
                    <text>{{item.description}}</text>
                </view>
            </view>
        </block>
    </view>
</scroll-view>
 <template is="login-popup" data="{{show: isLoginPopup, userInfo: userInfo}}"></template>
     
<view class="copyright" style="display:{{floatDisplay}}">
    <template is="tempCopyright" />
</view>

隐藏内容

此处内容需要权限查看