微信小程序开发LOL英雄实例代码

微信小程序开发LOL英雄实例代码
这篇文章主要介绍了微信小程序 LOL 英雄介绍开发的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 lol 英雄介绍开发的相关资料,需要的朋友可以参考下

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

　　1.下载微信开发者工具

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

　　2.新建项目

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

                          

　　3.编写代码

我的项目结构如下:

 目录解释: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" }] }}