微信小程序(八)
应用弹性盒子布局
基于 flexbox layout 的实现
先变为 flexbox layout
display: flex;
从上往下
flex-direction: column;
均匀分布,居中
justify-content: space-around;
//居中
align-items: center;
-----------------------------------------------------------------------------------
响应式长度单位rpx
如何让元素大小适配不同宽度屏幕
小程序规定所有设备的屏幕宽高均位750rpx
苹果6屏幕 px:rpx = 1:2
--------------------------------------------------------------------------------------
公共样式表 app.wxss
写全局 wxss
外置weekly页的标题
{
"navigationBarTitleText":"每周推荐"
}
---------------------------------------------------------------------
使用 navigator 组件
<navigator style="display:inline;" url="...">链接</navigator>
<!-- style="display:inline;" 可疑元素??? -->
open-type 属性
open-type='redirect'
<!-- 重定向,不返回 -->
hover-class 属性,级使用时注意之处
后定义的会渗出,要注意定义的排序(一个坑)
----------------------------------------------------------------
配置 tabBar
<!-- 用于链接点击,icon也变换的,不然点击链接无法跳转页面 -->
open-type='seitchTab'
----------------------------------------------------------------
配置全局的导航栏样式
全局配置 app.json 的"window"属性
<!--app.json-->
"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
-------------------------------------------------------------------
数据绑定-从视图中抽离出数据
基于DOM API手动更新视图的缺点--引入 data binding
pageObject 的注册
pageObject 的 data 属性
Page({
data:{
thisWeekMovie:{
name:"......",
comment:"......",
imges:"/imges/g.jpg"
}
s:61
}
})
运算表达式的数据绑定
<!--例-->
<text>{{(s>=60)?"及格":"不及格"}}</text>
使用开发者工具查看和修改页面状态数据
在小程序框架中,每个页面所需要的各种数据,都是集中在这个页面所注册的页面对象中定义的
微信小程序(八)的更多相关文章
- 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库
云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...
- 微信小程序从零开始开发步骤(八)引入框架WeUI
首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(十八)picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 微信小程序把玩(八)view组件
原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...
- 微信小程序把玩(三十八)获取设备信息 API
原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...
- 微信小程序,前端大梦想(八)
微信小程序之多媒体实例-播放器 播放音频和视频的功能也是小程序的特色,API也十分简单,本节我们一起来开发一个播放网络音乐的功能.API如下: 属性名 类型 默认值 说明 id String audi ...
- 微信小程序开发教程,大多数人都搞错的八个问题
小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...
- [转]微信小程序联盟 跳坑《一百八十一》设置API:wx.openSetting使用说明
本文转自:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4066 这个API解决了过去一个长久以来无法解决的问题,如何让用户重 ...
- 微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
随机推荐
- IO流基本概念
IO流主要分为两类 节点流:直接能够进行数据写入或读取的I0流.可以单独执行读写操作,但是功能比较单一,只能进行一些基本 的操作.例如:FileInputStream FileInputStream ...
- JuiceFS v0.17 发布,通过 1270 项 LTP 测试!
小伙伴们大家好,JuiceFS v0.17 在国庆小长假来临之际如期发布了!这是我们在 2021 年秋季推出的第二个版本,让我们直奔主题,看看都有哪些新变化吧. 本次更新累计 80+ 提交,共有 9 ...
- VmWare装Linux&Centos步骤
昨晚一次偶然的机会进入飞哥的直播间,他正在将用虚拟机搭建Linux环境的步骤,自己之前也确实安装过一次,不过没什么系统性总结,过程中有些步骤还需百度查找.于是乎今天决定从零基础在过一遍流程,便是这篇博 ...
- Redux使用指南
Redux使用指南 00-简介 本文主要是用来记录Redux结合React的使用过程,帮助大家在使用Redux的时候,能够更好的理解Redux,从而更好地使用它 01-为什么需要Redux JavaS ...
- PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
飞桨 (PaddlePaddle) 以百度多年的深度学习技术研究和业务应用为基础,是中国首个自主研发.功能完备. 开源开放的产业级深度学习平台,集深度学习核心训练和推理框架.基础模型库.端到端开发 ...
- 题解 「ZJOI2018」历史
题目传送门 Description 九条可怜是一个热爱阅读的女孩子. 这段时间,她看了一本非常有趣的小说,这本小说的架空世界引起了她的兴趣. 这个世界有 \(n\) 个城市,这 \(n\) 个城市被恰 ...
- 洛谷3571 POI2014 SUP-Supercomputer (斜率优化)
一道神仙好题. 首先看到有多组\(k\),第一反应就是离线. 考虑贪心. 我们每次一定是尽量选择有儿子的节点.以便于我们下一次扩展. 但是对于一个\(k\),每次贪心的复杂度是\(O(n)\) 总复杂 ...
- python-docx处理Word必备工具
我的理解 为什么会用到python-docx,因为近段时间下载了大量网文,但格式都是html的,我个人习惯使用word处理文字,于是就想法设法把html文档转换为word,首先要考虑的问题就是从h ...
- SpringBoot之日志注解和缓存优化
SpringBoot之日志注解和缓存优化 日志注解: 关于SpringBoot中的日志处理,在之前的文章中页写过: 点击进入 这次通过注解+Aop的方式来实现日志的输出: 首先需要定义一个注解类: @ ...
- python3去除行号
问题:在复制一些代码时会同时复制每行的行号,删除比较麻烦,所以利用python3本身的代码进行一键删除. # 导入re 模块来使用正则表达式 import re """去 ...