微信小程序 LOL 英雄介绍开发实例


Posted in Javascript onSeptember 30, 2016

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此.

1.下载微信开发者工具

官网链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下载完成之后默认安装即可

2.新建项目

打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录),如果没有AppID,选择无APPID即可(部分功能受限)

                         微信小程序 LOL 英雄介绍开发实例 

微信小程序 LOL 英雄介绍开发实例

3.编写代码

我的项目结构如下:

微信小程序 LOL 英雄介绍开发实例

 目录解释:pages这个文件夹放的是你的这个小程序所涉及到所有页面.image文件夹放图片.app.json是一个小程序的入口配置文件,一些全局设置都在这个文件里面.

我们可以看到detail这个目录下有四个文件:

(1)  detail.js是detail.wxml这个页面涉及到的js处理的文件

(2) detail.json是detail.wxml的配置文件,比如我们可以设置导航条的标题

(3) detail.wxml是小程序索要展示的页面,UI的架子.

(4) detail.wxss是detail.wxml的样式文件,类似于css文件

3.1 接下来我们看一看app.json文件:

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/detail/detail",
  "pages/notice/notice",
  "pages/noticedetail/noticedetail"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "英雄角色",
  "navigationBarTextStyle":"black",
  "backgroundColor": "#fbf9fe"
 },
 "tabBar": {
  "color": "#333",
  "selectedColor": "#3cc51f",
  "borderStyle": "#cccccc",
  "backgroundColor": "#ffffff",
  "list": [{
   "pagePath": "pages/index/index",
   "text": "英雄列表",
   "iconPath": "image/list_normal.png",
   "selectedIconPath": "image/list.png"
  }, {
   "pagePath": "pages/notice/notice",
   "text": "版本公告",
   "iconPath": "image/hot_normal.png",
   "selectedIconPath": "image/hot.png"
  }]
 }
}

pages是整个小程序需要注册的页面,注意到不用指定文件后缀,我们也不用去位一个页面引用指定的wxss,js,json文件.小程序会自动去匹配相关的 filename.wxml, filename.wxss, filename.js, filename.json文件,所以我们在命名这些文件的时候要保持文件名一致.

windows是对小程序的导航栏的一些设置,如导航标题,颜色等.

tabBar是小程序底部的导航按钮,根据自己的需求可以设置多个按钮,并指定相应的路径,名称.

3.2 app.js文件

app.js里面装着一些全局函数,全局变量等

//app.js
App({
 onLaunch: function () {
  //调用API从本地缓存中获取数据
  var logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
 },
 getUserInfo:function(cb){
  var that = this
  if(this.globalData.userInfo){
   typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
   //调用登录接口
   wx.login({
    success: function () {
     wx.getUserInfo({
      success: function (res) {
       that.globalData.userInfo = res.userInfo
       typeof cb == "function" && cb(that.globalData.userInfo)
      }
     })
    }
   })
  }
 },
 globalData:{
  userInfo:null,
  userId:null
 }
})

globalData对象里面放一些全局变量,比如我们要跨页面传参数,就要用到这个.

如果我们要在另外一个页面操作这个全局变量,需要如下操作:

var app=getApp();

app.globalData.userId="12"

这样就可以操作全局变量了.

  3.3 数据绑定

小程序中的数据绑定类似于angular,vue,采用双花括号的方法,花括号内部即变量,在detail.wxml文件中形如{{name}},设置变量name的值需要在对应的detail.js文件中进行设置.

Page({
  data: {
    hero:heros.getInfoById(app.globalData.userId),<br>
 name:'Ricky',<br>

 items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]
  },
  onLoad:function () {
    this.setData({
      hero:heros.getInfoById(app.globalData.userId)
    })
  },<br>
tapName:function(event){<br>

console.log(event)<br>
}
})

单个页面上要动态设置变量,要通过this.setData({})方法

  3.4 绑定事件

wxml中的事件绑定采用 bind+方法名

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

自定义属性采用 data-属性名 的形式,要去到这个自定义属性,可以通过tapName方法中的event对象获取

3.5 列表渲染

小程序中的列表渲染采用wx:for="{{items}}"的方法,每一次循环items这个变量,会生成一个item对象,可以通过item.name获取每一次循环中的name属性

<view wx:for="{{items}}" class="listView" bindtap="showDetail" data-idIndex="{{index+1}}"><br>

<view>{{item.name}}</view><view>{{item.id}}</view><br></view>

3.6 导航

小程序里面的页面跳转可以使用:

wx.navigateTo({
     url: '../detail/detail'
   })

官方规定跳转最多5层页面.

更多小程序的API信息请参考官方网站:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=1475052046827

 最后给大家看一下我的迷你小程序的截图~

 微信小程序 LOL 英雄介绍开发实例微信小程序 LOL 英雄介绍开发实例

 微信小程序 LOL 英雄介绍开发实例

 微信小程序 LOL 英雄介绍开发实例

感谢大家的阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
react-native android状态栏的实现
Jun 15 Javascript
SVG实现时钟效果
Jul 17 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
javascript的几种写法总结
Sep 30 #Javascript
Vue.js实现拖放效果的实例
Sep 30 #Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 #Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 #Javascript
关于List.ToArray()方法的效率测试
Sep 30 #Javascript
微信小程序 window_x64环境搭建
Sep 30 #Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 #Javascript
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
理解javascript闭包
2015/12/15 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
python中sys.argv函数精简概括
2018/07/08 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python将视频转换为全字符视频
2019/04/26 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
python自动生成model文件过程详解
2019/11/02 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
煤矿机修工岗位职责
2014/02/07 职场文书
物控部经理职务说明书
2014/02/25 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫