首页 > 小程序教程 > 微信小程序游戏攻略社区攻略雷西兴搜索制作设计模板教程下载

微信小程序游戏攻略社区攻略雷西兴搜索制作设计模板教程下载

上一篇 下一篇
今天给大家带来游戏攻略社区攻略雷西兴搜索制作设计模板教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->

<view class="page">
    <view class="page__hd" style="padding:20px 40px;">
        <view class="page__title">欢迎使用"游戏攻略社区"</view>
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </view>

    <view class="page__bd">
        <view class="weui-cells__title">攻略类型</view>
        <view class="weui-cells weui-cells_after-title" wx:for="{{gameList}}" wx:key="id">
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="{{ item.linkUrl }}" open-type="navigate">
                <view class="weui-cell__hd">
                    <image src="{{item.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">{{ item.name }}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access" wx:if="{{ item.desc }}">{{ item.desc }}</view>
            </navigator>
        </view>
    </view>

    <view class="weui-footer weui-footer_fixed-bottom">
        <view class="weui-footer__links">
            <navigator url="../../example/index" class="weui-footer__link">WebUI样式</navigator>
        </view>
        <view class="weui-footer__text">Copyright © 2017 serenitynight.com</view>
    </view>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  margin-top:20px;
  margin-right:15px;
}

.userinfo-nickname {
  color: #aaa;
}

三、js页面代码如下:
/**
 * index.js 
 * app.json中pages数组的第一项代表小程序的初始页
 * Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
 * @description 游戏攻略社区首页
 * @version 1.0.0
 */

var app = getApp()    //获取应用实例

Page({

  // 页面的初始数据
  data: {
    gameList: [{
      id: '1',
      name: '式神搜索',
      icon: '../../static/images/tips1.png',
      linkUrl: '../onmyouji/hellspawnSearch/hellspawnSearch',
      desc: '查找阴阳师中式神位置'
    }, {
      id: '2',
      name: '式神属性',
      icon: '../../static/images/tips2.png',
      linkUrl: '',
      desc: '查看式神攻击等信息(TODO)'
    }, {
      id: '3',
      name: '御魂属性',
      icon: '../../static/images/tips3.png',
      linkUrl: '',
      desc: '查看对比御魂属性(TODO)'
    }, {
      id: '4',
      name: '标题待定(TODO)',
      icon: '../../static/images/tips4.png',
      linkUrl: '',
      desc: '描述待定(TODO)'
    }],
    userInfo: {}
  },

  //================================ 生命周期函数 START ============================//
  // 监听页面加载, 一个页面只会调用一次。
  onLoad: function () {
    console.log('onLoad', '监听页面加载')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
      console.log(userInfo);
    })
  },

  // 监听页面初次渲染完成, 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
  onReady: function () {
    console.log('onReady', '页面初次渲染完成');
  },

  // 监听页面显示
  onShow: function () {
    console.log('onShow', '页面显示');
  },

  // 监听页面卸载
  onUnload: function () {
    console.log('onUnload', '页面卸载');
  },

  // 监听页面隐藏
  onHide: function () {
    console.log('onHide', '页面隐藏');
  },

  //================================ 生命周期函数 END ===============================//

  // 事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },

  // 用户分享
  onShareAppMessage: function () {
    return {
      title: '游戏攻略社区',
      path: '/pages/index/index'
    }
  }



})

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

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