给QQ小程序增加一个友情链接页面附案例
之前和群友们讨论的时候想到的这个点,因为QQ小程序的小程序跳转不需要是同一开发者,也就是说QQ小程序可以跳转到任何其他小程序,这么一来其实就和网站的友情链接是一个性质了。所以这次给大家分享一个小程序简单的友情链接页面。

友情链接主要事件函数

 <navigator appId="1109950501" openType="navigate" target="miniProgram">

和加群按钮一样,都可以直接写在qml页面上,但是前提是在app.json配置需要跳转的小程序ID;

 "navigateToMiniProgramAppIdList": [
        "1109950501",
    ],

这样就可以实现小程序之间的跳转了。

接下来是页面代码

首先是.qml文件

<view class="xyy-body">
    <view class="xyy-hy">
        <view class="xyy-title">更多小程序</view>
        <view class="xyy-ul">
            <navigator appId="1110028178" class="xyy-li" hoverClass="xyy-li-hover" openType="navigate" target="miniProgram">
                <image class="apkgimg" src="/images/jb.jpg"></image>
                <view class="xyy-li-title">句伴</view>
            </navigator>
            <navigator appId="1110027742" class="xyy-li" hoverClass="xyy-li-hover" openType="navigate" target="miniProgram">
                <image class="apkgimg" src="/images/cyxxl.jpg"></image>
                <view class="xyy-li-title">成语消消乐</view>
            </navigator>
              <navigator appId="1110118393" class="xyy-li" hoverClass="xyy-li-hover" openType="navigate" target="miniProgram">
                <image class="apkgimg" src="/images/yxqmzs.png"></image>
                <view class="xyy-li-title">游戏取名助手</view>
            </navigator>
            <navigator appId="1109950501" class="xyy-li" hoverClass="xyy-li-hover" openType="navigate" target="miniProgram">
                <image class="apkgimg" src="/images/jtt.jpg"></image>
                <view class="xyy-li-title">鸡汤帖</view>
            </navigator>
        </view>
    </view>
</view>

里面的图片啥的自己替换就行了。
主要可能就是qss文件了,下面就是代码:

page {
    background: #ACE1AF;
}

.xyy-hy {
    background: #ffffff;
    border-radius: 8rpx;
    border: 1px solid #f0c720;
    box-shadow: 0px 1px 5px #eec314;
    margin: 24rpx 16rpx;
}

.xyy-title {
    font-size: 32rpx;
    color: #666666;
    border-bottom: 1px solid #ececec;
    margin: 12rpx 0;
    padding: 16rpx 24rpx;
    font-weight: bold;
}

.xyy-ul {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 12rpx;
}

.xyy-li {
    width: 25%;
    text-align: center;
    padding: 0 0 12rpx 0;
    margin-bottom: 12rpx;
}

.xyy-li-hover {
    background: #f5f9f4;
    border-radius: 8rpx;
}

.xyy-li .fyiconfont {
    color: #ed5564;
    font-size: 68rpx;
    padding-top: 24rpx;
    display: block;
    height: 84rpx;
    line-height: 80rpx;
}

.xyy-li-title {
    font-size: 28rpx;
    color: #333;
    margin: 10rpx 0 12rpx 0;
    font-weight: 500;
    height: 40rpx;
}

.baqian {
    font-size: 24rpx;
}

.xyy-gj .fyiconfont {
    color: #62bb8b;
}

.fy-header {
    padding: 12rpx 44rpx 0 0rpx;
    font-size: 30rpx;
    margin-bottom: 12rpx;
}

.fy-icon {
    line-height: 30rpx;
    display: inline-block;
    color: #666666;
}

.placeholder {
    margin: 10rpx;
    padding: 0;
    text-align: center;
    height: 36rpx;
    line-height: 36rpx;
    color: #37bd9c;
}

.gjx-lx {
    border-bottom: 2px solid #37bd9c;
}

.weui-grid {
    margin: 12rpx 6rpx;
    background: #ffffff;
    border-radius: 8rpx;
    border: 1px solid #ececec;
    box-shadow: 0px 1px 5px #eaeaea;
    padding: 24rpx 12rpx;
}

.weui-flex {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
}

.weui-flex__item {
    flex: none;
    width: 33.3%;
    text-align: center;
}

.gjx-icon {
    font-size: 60rpx;
    margin: 0rpx auto;
}

.gjx-title {
    font-size: 32rpx;
    color: #333;
    margin: 24rpx 0 16rpx 0;
    font-weight: 500;
    height: 40rpx;
}

.huanyihuan {
    border: 1px solid #37bd9c;
    background: #ffffff;
    border-radius: 8rpx;
    display: block;
    color: #37bd9c;
    font-size: 36rpx;
    font-weight: 400;
    text-align: center;
    line-height: 36rpx;
    padding: 24rpx 0;
    margin: 12rpx auto 12rpx;
    width: 31.1%;
}


.gjx-header {
    margin-top: 48rpx;
    background: none;
}

.gnzc {
    font-size: 30rpx;
    color: #aaaaaa;
    text-align: center;
}

.xueyingyushare {
    border: 0 none;
    color: #999999;
    font-size: 28rpx;
    margin-bottom: 60rpx;
}

.gjx-br-title {
    font-size: 28rpx;
    margin: 30rpx 0 10rpx 0;
}

.dot-d {
    position: relative;
}

.dot-red {
    position: absolute;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background: #ed5564;
    right: 53rpx;
    top: 24rpx;
}

.gzfk {
    color: #aaaaaa;
    font-size: 32rpx;
    margin-top: 16rpx;
    line-height: 1.5;
}

.bottom-text {
    height: auto;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    width: 100%;
    height: 45rpx;
    line-height: 45rpx;
    display: block;
}

.fixed-copy-btn {
    width: 200rpx;
    height: 50rpx;
    border-radius: 21rpx;
    font-size: 22rpx;
    color: #ffffff;
    margin-left: 280rpx;
    background-color: #2a2724;
    line-height: 50rpx;
    text-align: center;
}

.fyiconfont {
    font-family: "fyiconfont" !important;
    font-size: 32rpx;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke-width: 0rpx;
}

.more-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 0;
}

.more-link-item {
    text-align: center;
    padding: 0;
    line-height: inherit;
    background: transparent;
    color: #333;
}

button[class="more-link-item"]::after {
    border: 0 none;
}

.more-link-item-hover {
    background: transparent;
    color: #fff;
}

.apkgimg {
    width: 90rpx;
    padding-top: 24rpx;
    height: 84rpx;
    line-height: 80rpx;
}

如果看教程还有有些疑虑的话,我给搭建准备了案例。


下载链接: 单击此处复制链接

  • 忘了说了,小程序只允许添加10其他小程序ID!

该内容为安好屋原创内容,如需转载请留言。

本站唯一微信公众号:ygycz999(阳光艺创站)

小程序开发者交流区:660459637


版权属于:安好屋

转载时须注明出处及本声明

微信公众号:阳光艺创站
最后修改:2020 年 02 月 14 日 01 : 20 PM
好吧,我穷的快要被消灭了。