微信小程序 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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
jquery分页对象使用示例
Apr 01 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
python实现猜单词小游戏
2020/05/22 Python
python解决字符串倒序输出的问题
2018/06/25 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
出生公证书样本
2014/04/04 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
创先争优个人总结
2015/03/04 职场文书
活动宣传稿范文
2015/07/23 职场文书
2016年感恩节寄语
2015/12/07 职场文书