第二弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践---配置、首页面开发
2017-04-16 00:19
771 查看
第二弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践
---配置、首页面开发
第三章:配置
根据项目需求和教程,小程序配置文件的代码为:app.json
App.json 里面有几个配置项:
Pages:这个是编写的 js 文件,后缀 .js 这里不需要使用,配置好正确路径即可正常应用到(应用不到在重启微信开发者工具会直接报 page 错误)。Window:配置顶部的一些样式,文档介绍比较详细。
tabBar:底部的几项配置,见名知意。
iconPath 和 selectedIconPath:底部菜单按钮图片与得到切换点击高亮。
app.wxss(配置全局wxss样式)
第四章:微信小程序首页(静态页面)开发
welcome.wxml
1.视图容器view
这里用视图容器view块级元素将每个元素包裹起来,以便方便wxss的样式添加和js交互实现。常用的样式的属性:display :显示的模式。可选项有:flex(代表view可以伸缩,弹性布局)
flex-direction :view容器主轴布局方向。可选项有:row , column
justify-content :view容器子元素沿着主轴的排列方式。可选项有:flex-start、center、flex-end、space-around
align-items :view容器子子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。可选项有:flex-start、center、flex-end
flex :权重。可选项:1,2, 3, 4, 5…(flex与display属性一般结合使用,单独使用flex无效)
2.{{ }}数据绑定机制。上述部分有两点需要说明:
(1): 视图层嵌入的是{{motto}}而不是{{data.motto}},微信框架默认设定视图层绑定的变量定义在Page对象的data属性中,也就是说,如果变量需要绑定到视图层,一定要定义data属性中(2): 通过调用Page对象的setData(Page对象预定义)方法,可以更新界面数据,但是直接设置变量是无效的,因此对于绑定到视图层的变量,要永远使用setData方法来设置变量值
welcome.wxss(接下来的页面不会上wxss代码,完成这些主要是前期对效果图的精准制作和分析)
微信小程序尺寸单位rpx以及样式
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0。
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx
微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx
注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
welcome.js
1.wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(搭配onTap组件使用,点击后跳转页面)
2.app.js中包含一个App()函数,我把它理解为微信小程序真正意义上的入口,也就是说当启动一个小程序的时候,首先会执行到这里。App()函数用来注册一个小程序,参数为Object类型,可以在其中指定小程序的生命周期函数(理解还不是很透彻), 当然,也可以定义一个全局的数据和函数,我们可以在页面中调用全局的getApp()方法,获得小程序实例,从而来调用我们定义的全局数据和函数。
相关文章推荐
- 第三弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践---阅读首页、阅读详情开发
- 第五弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践---电影详请开发
- 第六弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践---项目结束和补充总结
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
- XMPP框架 微信项目开发之XMPP配置(二)——安装配置客户端(Adium)和配置系统自带的信息程序,并对聊天进行测试
- 微信小程序项目 配置开发环境及全面了解小程序
- 微信小程序开发实践经验总结(1)
- 配置实现-一个信息管理类项目的实践总结
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
- 微信小程序项目实践 项目范围及开发计划
- LINUX系统学习与进阶—项目实践中Linux集群的总结和思考
- 注册绑定页面及微信二维码登陆页面开发项目总结
- 第七周上机实践项目2——自选图形用户界面程序开发
- 一个利用微信分享的项目开发过程以及后续思考
- Android实战-个人App乐逗项目(第一阶段:微信精选文章完成与总结)
- Personal Reading Assignment 2 -读推荐文章有感以及项目开发目前总结
- 开发微信游戏项目总结
- 第七周 课后实践:项目二——自选图形用户界面程序开发(求三角形面积)
- 【FreeMarker】【程序开发】配置对象,共享变量,配置信息