微信小程序入门篇(二)
上篇我们讲解了一下小程序的整体架构,今天来讲一下,一个页面的具体实现原理,好注意听,下面要开始画重点啦~哈哈
页面的构成
- 还记得我们在上篇文章中讲解如何加入一个界面吗?在app.json中的pages加入要加的文件路径就可以啦,文件路径可以随便起,系统会自动创建出来的,那么我就接着之前的讲,我们之前创建了一个页面叫addPage,addPage里面包含四个文件* addPage.js、addPage.json、addPage.wxml、addPage.wxss*这四个对应的作用是什么呐?
- addPage.js 页面数据的存储,网络请求的加载都是在这里
- addPage.json 用于设置导航栏样式,和app.json性质一样,如果没设置样式,默认用app.json中的样式
- addPage.wxml 页面的效果都在这里面,就是展现给用户的界面
- addPage.wxss 页面样式设计,页面的一些样式属性都写在这里
页面的解析
addPage.js解析
// pages/addPage/addPage.js Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.debug("onLoad--监听页面加载");},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {console.debug("onReady--监听页面初次渲染完成");},/*** 生命周期函数--监听页面显示*/onShow: function () {console.debug("onShow--监听页面显示");},/*** 生命周期函数--监听页面隐藏*/onHide: function () {console.debug("onHide--监听页面隐藏");},/*** 生命周期函数--监听页面卸载*/onUnload: function () {console.debug("onUnload--监听页面卸载");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.debug("onPullDownRefresh--监听用户下拉动作");},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.debug("onReachBottom--页面上拉触底事件的处理函数");},/*** 用户点击右上角分享*/onShareAppMessage: function () {console.debug("onShareAppMessage--用户点击右上角分享");} })
这里面注释都是系统自动创建的,我没动,注释写的很清楚,我没什么要多说的啦,差别是我在每个方法里加入了console.debug()这个是以后调试bug会用到的,输出日志,就是以后程序出现的问题就靠他输出来,我加入的目的就是要展示一下,系统启动小程序都执行了那些方法,怎么测试系统执行了那些方法呐?
第一步,改动跳转的代码,首先找到pages/index/index.js,修改bindViewTap方法里的url,路径改为addPage的路径,这样页面跳转的时候就会跳到addPage界面啦,修改过的代码记得保存,否者效果无效!
bindViewTap: function() {wx.navigateTo({//url: '../logs/logs'url: '../addPage/addPage'})},
第二步,找到菜单栏的调试按钮,切换到调试模式,找到Console控制台,选着All或者Debug模式,Console会输出日志信息,接下来点击一下helloWord上面的用户头像,看看会出现上面效果,如果操作没错的话会出现下面的效果,
看控制台输出的信息,理论上是会出现三行蓝色字,第四行是因为我还执行了一个返回键的操作由此可判断,当点击返回键时执行onUnload方法,还有当页面加载的时候方法执行的先后顺序为onLoad->onShow->onReady,我们只要知道页面的生命周期就好,至于具体的调用,我们在后面实战的时候讲解,还有如果你点击界面三个小点,然后执行转发操作,就会执行onShareAppMessage方法,具体我就不演示啦,addPage.js中还有的方法是* onHide、onPullDownRefresh、onReachBottom*,当A跳转到B时候,A就会执行onHide的方法啦,onPullDownRefresh下拉刷新数据会用到,onReachBottom用于底部加载更多,这些都放在后面在讲解电商开发的时候一起讲。好,关于addPage.js就讲解到这里
addPage.wxml与addPage.wxss
.wxml与.wxss构成了整个界面,我们自己新建的addPage文件没什么样式,所以我就拿index.wxml和index.wxss来讲解- index.wxml
<!--index.wxml--> <view class="container"><view bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view> </view>
看代码对应的视图,从代码看过去黑色框(view)包含两个黄色框(view),第一个黄色框又包含两个image和text,界面布局大致就是这样,看里面具体代码,黑色框view里有一个属性class,这个class可以理解为ID这个class是用来关联index.wxss,可以理解为黑色框的view设置为”container”的样式,继续看第一个黄色框View,同理可以知道第二个黄色框View的样式设为”userinfo”,咦,bindtap是什么意思呐?bindtap你可以理解为事件监听,系统定义的固定字段,写事件一定会用到这个,还记得上面我们做的测试系统执行的方法时,不是有修改过index.js中”bindViewTap”的方法嘛,这个”bindViewTap”是自定义的方法名,可以随意修改,但是bindtap字段是不可修改的否则代码无效,再说说绿色框中的text,有没有注意到{{motto}}{{userInfo.nickName}},这个就是给视图赋值,就是界面上你看到的HelloWord就是这么设置的,”motto、userInfo.nickName”字段是在index.js中的data里面,这里要强调的是我们在调用index.js里data数据时,赋值的时候要记得加入{{data}}两个中括号,这样系统才能识别数据。
index.wxss
/**index.wxss**/ .userinfo {display: flex;flex-direction: column;align-items: center; } .userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; } .userinfo-nickname {color: #aaa; } .usermotto {margin-top: 200px; }
/**app.wxss**/ .container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box; }
结合效果图一起看样式代码,看到”userinfo”和”container”是不是眼熟,就是之前在index.wxml中class的样式,我们在wxss定义好样式,就是通过这些字段把index.wxml和index.wxss关联起来,才有的上面的界面效果
- index.wxml
wxss样式积累
wxss样式里代码看不懂可以查阅这里,如果没找到对应样式,请自行百度喽,这些也是代码君问的度娘
1. display属性
- none:此元素不会被显示
- block:两个元素自动换行
- inline:两个元素靠在一起
- inherit:继承父类
- flex:多栏多列
2. flex-direction:
3. 厚大司考
4. 大花洒
- column 垂直分布
- row 水平分布
3. flex-wrap:
- nowrap item溢出不换行
- wrap 超出的item跳到下一行
4. justify-content属性
- flex-start:左对齐
- flex-end:右对齐
- center:居中
- space-between :item中间留出等间距
- space-around:环绕item流程等间距
5. align-items item 边界线对齐方式
- flex-start | flex-end | center | baseline | stretch
6. border-bottom 边界线
- 举个栗子 1px solid #ccc;
7. align-items item 边界线对齐方式
- flex-start | flex-end | center | baseline | stretch
8. overflow-x 内容超过边框处理方式
- visible 显示超出的内容
- hidden 隐藏超出的内容
- auto 自动加入滚动条
总结
今天我们讲解了页面的所有内容,知识点很多,尤其是wxss的样式,其实wxss样式和css样式的属性是差不多的,所以可以多去参考css样式属性,今天就说这么多,两篇的小程序入门文章,应该可以帮助大家跨进小程序的大门啦,接下来,我们将进入实战篇《电商》,很多朋友都问怎么做一个电商小程序,所以我将在后面的文章中,一步步教大家开发一个电商小程序,敬请期待!原创不易,觉得不错就点个赞吧!
文章首发公众号:代码集中营
关注公众号获取最新文章
微信小程序入门篇(二)相关推荐
- 微信小程序 - 入门篇
微信小程序入门 文章目录 微信小程序入门 全局配置 window配置 微信组件 微信小程序与Vue 复用性 自定义Tabbar 组件的封装 路由跳转 网络低代码 本地存储 弹窗交互 weUI 全局配置 ...
- 微信小程序入门篇(一)
最近因为课程作业需要用到微信公众号及小程序的开发与管理,网上搜了好多,好不容易找到便于使用的,先存下来,以后慢慢看~ 转载自:https://www.jianshu.com/p/e63be70e3ab ...
- 微信小程序入门(二)
上回刚说到关于这个WXSS的简单内容,那么今天这个入门二就顺着上一篇的内容来继续讲一讲关于小程序入门的一系列内容 选择器 开发者文档 从开发者文档中我们可以知道,小程序不支持通配符 * ,也就是说例如 ...
- 微信小程序入门篇4---新闻网 本地缓存 三个页面
首先,这个小程序较前三个难度加大 项目目录 首页 index.js */var common = require('../../utils/common.js')Page({data: {swiper ...
- 前端微信小程序实战篇
电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
- 微信小程序实战篇-电商(一)
哈喽,大家好,端午节过的怎么样啊,代码君可是没休息,专心的写电商文章哦,也是蛮拼的,如果对代码君认可的话,欢迎点赞转发,你们的点赞转发是对我最大的支持!好啦,言归正传,我们今天要讲解微信小程序的实战篇 ...
- 从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
- 微信小程序入门二:底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
- 微信小程序实战篇-商品详情页(二)
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
最新文章
- js一个按钮弹出两个按钮_没有电位器,用两个按钮可以实现变频器调速吗?
- 【已解决】nimfa 环境的详细搭建过程 + 各种依赖库的安装、下载、调试
- springboot-mail
- 第6次cplus实验
- 多线程中堆和栈区别的深入解析
- c 服务器文件路径,c打开服务器文件路径
- 维纳滤波的详细讲解(同为小白,相互取暖)
- Html鼠标右键菜单代码
- 在线抽签html,抽签网页板代码
- 高斯光束matlab传输,高斯光束传播matlab
- python柱状图显示数值_Python实现绘制双柱状图并显示数值功能示例
- 甲每秒跑3米,乙每秒跑4米,丙每秒跑2米,三人沿600米的环形跑道从同一地点同时同方向跑步,经过多少时间三人又同时从出发点出发?
- [转载]网络数据流的java处理
- Linux怎么样修改文件编码,Linux下批量修改文件编码
- 针对Faster RCNN具体细节以及源码的解读之SmoothL1Loss层
- 使用cython加速代码运行
- VSCode中安装Live Server插件实现Html网页代码的实时预览
- Amy Palladino 加入 BCW,担任企业运作执行副总裁兼董事总经理
- 惊蛰恰逢“龙抬头”,流感高峰季来袭,你准备好了吗?
- input限制只能11位的数字电话号码
热门文章
- ODOO15委外加工(外协)业财一体凭证生成方案
- magento2 邮件模板中直接调用 block文件
- 各大IT企业招聘所须要求技能
- 为WebApi项目添加注册功能:问题与解决的思维流程
- mysql zimbra_zimbra的使用与管理
- star ccm 报java错误_在 Linux VM 上运行 STAR-CCM+ 与 HPC Pack - Azure Virtual Machines | Microsoft Docs...
- MOOC数据结构 第二周
- DXF库(dxflib)使用指南
- 2021 CVVD首届车联网漏洞挖掘赛线上初赛 Writeup
- oracle 数据字典画报,Oracle 数据字典查询