微信小程序

Posted Sil

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序相关的知识,希望对你有一定的参考价值。

应用弹性盒子布局

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

  运算表达式的数据绑定

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

 

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

 

以上是关于微信小程序的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序视图层WXML_模板

7-微信小程序 模板(template)

vscode 开发微信小程序环境配置

微信小程序json数据如何处理?

微信小程序第七天WXML语法之模板用法

微信小程序第七天WXML语法之模板用法