应用弹性盒子布局

  基于 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>

  使用开发者工具查看和修改页面状态数据

  在小程序框架中,每个页面所需要的各种数据,都是集中在这个页面所注册的页面对象中定义的

微信小程序(八)的更多相关文章

  1. 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库

    云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...

  2. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  3. 微信小程序把玩(二十八)image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  4. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  5. 微信小程序把玩(八)view组件

    原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...

  6. 微信小程序把玩(三十八)获取设备信息 API

    原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx. ...

  7. 微信小程序,前端大梦想(八)

    微信小程序之多媒体实例-播放器 播放音频和视频的功能也是小程序的特色,API也十分简单,本节我们一起来开发一个播放网络音乐的功能.API如下: 属性名 类型 默认值 说明 id String audi ...

  8. 微信小程序开发教程,大多数人都搞错的八个问题

    小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...

  9. [转]微信小程序联盟 跳坑《一百八十一》设置API:wx.openSetting使用说明

    本文转自:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4066 这个API解决了过去一个长久以来无法解决的问题,如何让用户重 ...

  10. 微信小程序开发教程(八)视图层——.wxml详解

    框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...

随机推荐

  1. IO流基本概念

    IO流主要分为两类 节点流:直接能够进行数据写入或读取的I0流.可以单独执行读写操作,但是功能比较单一,只能进行一些基本 的操作.例如:FileInputStream FileInputStream ...

  2. JuiceFS v0.17 发布,通过 1270 项 LTP 测试!

    小伙伴们大家好,JuiceFS v0.17 在国庆小长假来临之际如期发布了!这是我们在 2021 年秋季推出的第二个版本,让我们直奔主题,看看都有哪些新变化吧. 本次更新累计 80+ 提交,共有 9 ...

  3. VmWare装Linux&Centos步骤

    昨晚一次偶然的机会进入飞哥的直播间,他正在将用虚拟机搭建Linux环境的步骤,自己之前也确实安装过一次,不过没什么系统性总结,过程中有些步骤还需百度查找.于是乎今天决定从零基础在过一遍流程,便是这篇博 ...

  4. Redux使用指南

    Redux使用指南 00-简介 本文主要是用来记录Redux结合React的使用过程,帮助大家在使用Redux的时候,能够更好的理解Redux,从而更好地使用它 01-为什么需要Redux JavaS ...

  5. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力

    ​ 飞桨 (PaddlePaddle) 以百度多年的深度学习技术研究和业务应用为基础,是中国首个自主研发.功能完备. 开源开放的产业级深度学习平台,集深度学习核心训练和推理框架.基础模型库.端到端开发 ...

  6. 题解 「ZJOI2018」历史

    题目传送门 Description 九条可怜是一个热爱阅读的女孩子. 这段时间,她看了一本非常有趣的小说,这本小说的架空世界引起了她的兴趣. 这个世界有 \(n\) 个城市,这 \(n\) 个城市被恰 ...

  7. 洛谷3571 POI2014 SUP-Supercomputer (斜率优化)

    一道神仙好题. 首先看到有多组\(k\),第一反应就是离线. 考虑贪心. 我们每次一定是尽量选择有儿子的节点.以便于我们下一次扩展. 但是对于一个\(k\),每次贪心的复杂度是\(O(n)\) 总复杂 ...

  8. python-docx处理Word必备工具

      我的理解 为什么会用到python-docx,因为近段时间下载了大量网文,但格式都是html的,我个人习惯使用word处理文字,于是就想法设法把html文档转换为word,首先要考虑的问题就是从h ...

  9. SpringBoot之日志注解和缓存优化

    SpringBoot之日志注解和缓存优化 日志注解: 关于SpringBoot中的日志处理,在之前的文章中页写过: 点击进入 这次通过注解+Aop的方式来实现日志的输出: 首先需要定义一个注解类: @ ...

  10. python3去除行号

    问题:在复制一些代码时会同时复制每行的行号,删除比较麻烦,所以利用python3本身的代码进行一键删除. # 导入re 模块来使用正则表达式 import re """去 ...