微信开发者工具---仿支付宝首页
一、微信开发者工具
微信开发者工具是一款专业高效的小程序开发工具,用户通过软件可以制作微信小程序和给公众号添加新的功能使用,非常地方便。
下载地址:
稳定版 Stable Build | 微信开放文档 (qq.com)
二、微信小程序开发wxml、json、js、wxss四类核心文件
1.wxml文件
wxml文件的意义类似与hmtl,写法也是采取的标签式写法。主要负责本页面的界面展示,以及事件的绑定等等。
zfb.wxml
<view class="container">
<view class="blue">
<view class="top">
<view class="search">
<input placeholder="支付宝小程序"></input>
</view>
<view class="more">
<image src="/images/01.png"></image>
<image src="/images/02.png"></image>
</view></view>
<view class="main-menu-g">
<view class="main-menu">
<image src="/images/1.png"></image>
<text>扫一扫</text>
</view>
<view class="main-menu">
<image src="/images/2.png"></image>
<text>付钱</text>
</view>
<view class="main-menu">
<image src="/images/3.png"></image>
<text>收钱</text>
</view>
<view class="main-menu">
<image src="/images/4.png"></image>
<text>卡包</text>
</view>
</view>
</view>
<view class="white">
<view class="white-menu">
<image src="/images/5.png"></image>
<text>余额</text>
</view>
<view class="white-menu">
<image src="/images/6.png"></image>
<text>信用卡还款</text>
</view><view class="white-menu">
<image src="/images/7.png"></image>
<text>充值中心</text>
</view><view class="white-menu">
<image src="/images/8.png"></image>
<text>红包</text>
</view><view class="white-menu">
<image src="/images/9.png"></image>
<text>电影</text>
</view><view class="white-menu">
<image src="/images/10.png"></image>
<text>大众点评</text>
</view><view class="white-menu">
<image src="/images/11.png"></image>
<text>收付码</text>
</view><view class="white-menu">
<image src="/images/12.png"></image>
<text>蚂蚁森林</text>
</view><view class="white-menu">
<image src="/images/13.png"></image>
<text>火车票</text>
</view><view class="white-menu">
<image src="/images/14.png"></image>
<text>贷款</text>
</view><view class="white-menu">
<image src="/images/15.png"></image>
<text>出行</text>
</view><view class="white-menu">
<image src="/images/16.png"></image>
<text>全部</text>
</view>
</view><swiper class="u-warp" indicator-dots="true" indicator-color="rgba (225,225,225,.3)"
autoplay="true" interval="2000" duration="300" circular="ture">
<block wx:for="{{burl}}">
<swiper-item>
<image src="{{item.url}}" class="u-img"></image>
</swiper-item>
</block>
</swiper></view>
可以看出WXML文件的格式主要是标签格式,如下所示:
<标签名 属性名1="属性值1" 属性名2="属性值2"> ... </标签名>
其中:
- 所有的元素都需要闭合标签
- 所有的元素都必须正确嵌套,符合层级关系
- 属性值必须使用引号包围
- 标签必须使用小写
- wxml中连续多个空格会被合并为1个空格.
2.wxss文件
1.作用
wxss文件是样式控制文件,类似与css文件,主要用于与wxml文件一起使用,优化wxml页面。
zfb.wxss
.blue{background: #3974f6;padding:20rpx;
}
.blue .top{height:58rpx;width:100%;display :flex;}
.blue .top .search{display :flex;flex:auto;
}
.blue .top .search input{flex: auto;background:white;border-radius:2px;font-size: 24rpx;
padding:0 10rpx;
}.white{display: flex;flex-wrap: wrap;padding-top: 20rpx;justify-content: space-around;
}
.white .white-menu{width: 180rpx;height: 100rpx;
display: flex;
flex-direction: column;
margin-bottom: 30rpx;
align-items: center;
}
.white .white-menu image{
width: 50rpx;
height: 55rpx;
}
.white .white-menu text{font-size: 32rpx;
}.more {display:flex;flex-basis:180rpx;justify-content:space-evenly;
}.more image{width :50rpx;height:50rpx;
}.main-menu-g{
margin-top: 30rpx;
display: flex;
margin-bottom: 20rpx;
justify-content: space-around;
}
.main-menu-g .main-menu{width: 100rpx;
height: 120rpx;
text-align: center;
}
.main-menu-g .main-menu image{width: 75rpx;
height: 75rpx;
}
.main-menu-g .main-menu text{color:white;font-size: 32rpx;
}
.main-menu-g .main-menu{width: 100rpx;
height: 120rpx;
text-align: center;}
.u-warp{width: flex;height: 400rpx;align-items: flex-end;
}
.u-img{width: 100%;
}
可以看出格式是多个样式类,每个类里都是样式键值对,不能嵌套,格式如下:
.样式类名{ key:value }
3. json文件
1.作用
JSON文件主要用于描述页面属性。
zfb.json
{"usingComponents": {}
}
根据不同标签,宏观描述和控制整个项目的属性,其他文件夹中的json用来描述当前文件夹中的页面属性,例如:执行index.wxml时,优先按index.json中描述的来的来,再按app.json中描述的来。
4.js文件
1.作用
主要负责页面的业务逻辑:包括生命周期,事件的绑定处理,数据的初始化等等。算是让小程序能动起来,而不只是静态的展示页面。
zfb.js
// pages/zfb/zfb.js
Page({data:{"burl":[{"url":"http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20160603/2ab98cd3f9ef4664a177b1f69b7d9dc3_th.jpg"},{"url":"http://p3.img.360kuai.com/t01081814237192b6ec.jpg?size=500x260"},{"url":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1124187468,2482026534&fm=173&app=25&f=JPEG?w=640&h=349&s=770609E6535715D6966D9DA903002011"},]},})//js
- wxml、wxss、 json主要是程序的前台文件,控制前台样式。
- js主要是程序的后台文件,控制后台数据和事件。
三、运行调试
微信开发者工具---仿支付宝首页相关推荐
- 微信小程序 ---在Vscode上编辑,微信开发者工具上预览,快速上手
微信小程序 -快速上手 第一个小程序 成功 导入一个已经在开发中项目 vscode 设置 设置高亮 拷贝到 settings.json "files.associations": ...
- 【uni-app】什么是uni-app?如何进行开发?如何连接微信开发者工具与安卓手机端?
文章目录 1 什么是 uni-app 2 如何使用与开发 3 用 HBuilderX 创建项目 4 如何连接微信开发者工具 5 如何连接安卓手机端 1 什么是 uni-app (此部分内容出自 uni ...
- 从0开始学习开发微信小程序(熟悉微信开发者工具页面,简单修改、添加一些内容)
目录 从0开始学习开发微信小程序 准备工作 下载安装微信开发者工具.注册小程序账号 创建小程序 实际操作学习基本功能 写一个名为new的页面. 修改主页的"Hello World" ...
- 微信小程序(微信开发者工具及工程创建、小程序配置、逻辑层、模块化)
一.阶段概述 1.课程安排 课程市场:14+1 课程安排:微信小程序:5uniapp:5数据可视化:4答辩:1 2.项目展示 小u商城 数据可视化 3.阶段目标 1.培养学员能力独立完成小程序原生开发 ...
- 微信小程序跳转微信小程序,使用微信开发者工具的测试记录
微信小程序跳转微信小程序,使用微信开发者工具的测试记录 A小程序 跳转 B小程序 编写A小程序代码 参数解释 编写B小程序接收参数代码 微信开发者工具测试 A小程序 跳转 B小程序 编写A小程序代码 ...
- 从零开始编写一个微信小程序(微信开发者工具+JS+WuxUI组件库+云开发)万字整理,建议收藏!
微信小程序-魔镜 笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示 视频演示 经历了一次升级之后,我的小程序怎么样了? 文章目录 微信小程序-魔镜 笔记&源码(微信开发 ...
- [小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar
文章目录 帐号设置 微信开发者工具 1.工具的下载与安装 2.helloworld项目 小程序目录结构及配置 1.目录结构 2.全局配置文件app.json 3.全局样式文件app.wxss 4.小程 ...
- 【笔记】微信开发者工具自定义编译模式(编译时,携带 指定参数 直接跳转 指定页面)
文章目录 问题 解决 问题 发现这个神奇功能之前,一般都是在 app.json 下 pages 里将当前页面置顶,参数写死... 或是,什么都不做,繁琐的一级一级的点,直到从首页进入需要调试页面... ...
- 如何开发“微信开发者工具”中的云开发功能
(一)下载"微信开发者工具" 联想软件商店https://lestore.lenovo.com/detail/L100672?origin=pcstore_copylink点击链接 ...
最新文章
- ServletContext讲解
- ssh远程执行多个命令
- Nmap安装和扫描(二:Nmap基本操作)
- form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
- python的数学模块是什么_Python的数学模块Think Python
- oracle 绑定变量模糊查询,求助-ACTIVE DG 异常shutdown
- sqlserver 判断不为空_SQL server 学习
- 机器学习算法(一) K-Means算法简述以及在MNIST上的聚类实现
- centOS服务器 netstat命令 查看TCP连接数信息(转)
- android读取剪切板的方法,Android获取粘贴板内容
- XtraReport数据绑定模式比较
- 【python】画玫瑰花喽!!!
- 狂胜——Redis学习笔记
- Code Sign error: Provisioning profile '6805769A-5085-4BE7-B9D1-2859CD2CBE9E' can't be found
- Linux编程入门(2)-实现who指令
- Android开发如何定制framework层服务
- MuleSoft知识总结-11.Mule基本组件(Transform Message)
- Redis--布隆过滤器--使用/原理/实例
- 当年高考,小灰是怎么混过来的?
- HTML+CSS(精灵图)实现微信滑动门技术
热门文章
- 【Python画图】Matplotlib中fig、ax、plt的区别及其用法(入门)
- 精品帖—matlab求解存在多个非线性不等式约束的多元约束优化问题方法
- 「一文搞定」串口、COM、UART、TTL、USB、RS-232、RS-485、I2C、SPI、CAN、1-WIRE
- android8.1字体,Android 8.1换上全新字体 阅读起来会更舒爽
- 一阶动态电路的响应测试(一)
- 紫书时时阅,茶香几时成——铁观音茶香Muffin
- mysql报错:mysql5.7和mysql8,查询时sql关键字rank问题
- 二级C语言编程题2010记事本,二级c的程序设计题作弊方法
- android 海拔高度_gps-Android:如何获取准确的海拔高度?
- “人生路,处处风雨阻,莫畏难,有志事事成”。