微信小程序 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 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
小程序如何写动态标签的实现方法
Feb 05 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
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php实现encode64编码类实例
2015/03/24 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python中input与raw_input 之间的比较
2017/08/20 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
长城导游词400字
2015/01/30 职场文书
年底个人总结范文
2015/03/10 职场文书
创卫工作总结2015
2015/04/22 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Golang获取List列表元素的四种方式
2022/04/20 Golang