首页 > 小程序教程 > 微信小程序黑客派书单计划正文页样式模板制作设计下载

微信小程序黑客派书单计划正文页样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<view class="body wrapper share">
  <view class="content">
    <text class="title">关于『书单』</text>
    <view>
      书单是黑客派社区的一个纸质书共享活动,所有书均来自捐赠,原则上当前的书籍持有者有义务将书寄送给需要的会员。
    </view>
    <view>
      我们鼓励你在书籍上
      <text class="ft-warn">留下笔迹</text>,任何信息都行,让其他人可以看到一些有意思的内容也是蛮不错的 😅
    </view>
    <view>
      <text class="h3">共享意味着什么</text>
      一旦你共享了一本书,就会使用你的社区账号自动发一篇书籍共享帖,这意味着你做了一个
      <text class="ft-warn">承诺</text>:将书送到需要的人手中。
    </view>
    <view>如果有同城的书籍需求者回帖,就面交吧!</view>
    <view>
      <text class="h3">一点思考</text>
      似共享书籍的事情有很多人做过,比如:
      <view>
        • 摆摆书架
      </view>
      <view>
        • 青番茄
      </view>
      <view>
        • 书巢
      </view>
      <view>
        • 丢书大作战
      </view>
      <view>
        • 很多社区的书籍交换
      </view>
      <view>大家的出发点都是想让这个世界变得更好。</view>
    </view>
    <view>黑客派的『书单』将作为长期活动持续下去,大家随时都能参与进来,让你我的生活变得更丰富有趣!
    </view>
  </view>
  <view class="bottom-btn wrapper" wx:if="{{isLogin}}">
    <button bindtap="logout" class="logout">登出</button>
    <button type="primary" bindtap="scan">ISBN 扫码 </button>
  </view>
  <view class="bottom-btn wrapper" wx:else>
    <button bindtap="goLogin" type="primary">参与『书单』计划</button>
  </view>
</view>
 
二、wxss样式文件代码如下:
@import "../share/share.wxss";

.logout {
  float: right;
  margin-left: 21px;
}
三、js页面代码如下:
// pages/scan/scan.js
Page({
  data: {
    isLogin: false
  },
  /**
   * 页面加载
   * optins url 参数
   */
  onLoad: function (options) {
    if (wx.getStorageSync('cookie')) {
      this.setData({
        isLogin: true
      })
    }
  },
  /**
   * 页面渲染完成
   */
  onReady: function () {
  },
  /**
   * 页面显示
   */
  onShow: function () {
  },
  /**
   * 页面隐藏
   */
  onHide: function () {
  },
  /**
   * 页面关闭
   */
  onUnload: function () {
  },
  /**
   * 分享
   */
  onShareAppMessage: function () {
    return {
      title: '黑客派社区『书单』共享计划',
      desc: ' 书单是黑客派社区的一个纸质书共享活动,所有书均来自捐赠... ',
      path: '/pages/scan/scan'
    }
  },
  /**
   * 跳转到登录页面
   */
  goLogin: function () {
    wx.redirectTo({
      url: '../login/login'
    })
  },
  /**
   * 扫码
   */
  scan: function () {
    wx.scanCode({
      success: (res) => {
        if (res.errMsg !== 'scanCode:ok') {
          wx.showToast({
            title: res.errMsg,
            icon: 'loading',
            duration: 8000
          })
          return false;
        }

        if (res.scanType !== 'EAN_13') {
          wx.showToast({
            title: '我们需要的是 ISBN 编码',
            icon: 'loading',
            duration: 8000
          })
          return false;
        }

        wx.navigateTo({
          url: '../share/share?ISBN=' + res.result
        })
      }
    })
  },
  /**
   * 登出
   */
  logout: function () {
    wx.removeStorage({
      key: 'cookie',
      success: function (res) {
        wx.redirectTo({
          url: '../login/login'
        })
      }
    })
  }
})

模板简介:该模板名称为【微信小程序黑客派书单计划正文页样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,177次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-21
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 html5 微信文章 微信素材 响应式 单页式简历模板 企业网站 微信模板 微信图片 微信公众平台
您可能会喜欢的其他模板