小程序开发-学习笔记

2020-05-11  本文已影响0人  落小花cc

基础

index.wxss    -- 相当于css,用于控制样式

index.js    -- 界面逻辑设计

index.json 页面的配置

index.wxml --页面内容 相当于html

app.wxss属于全局类 任何一个文件都可以使用

index.wxss只有index页面可以使用

一些css

text-transform  可用于控制英文全部大写或者全部小写。

text-align: justify主要用于英文段落,英文段落一般是两端对齐。

white-space: pre-wrap 该空格的地方空格,该换行的地方换行  文档中的空白处

word-spacing  单词间距

letter-spacing 字母之间的距离

wx.createInnerAudioContext() 用于创建音频对象

Flex弹性布局

display:flex;
flex-direction:row  // 默认  主轴方向 左右布局
flex-direction:column // 主轴方向 上下布局

弹性布局 Flex容器布局属性 示例

事件的参数传递

wxml:

<button bindtap="begin" data-num="1">出去吃啥?</button>

js:

begin:function(e){    var index=e.currentTarget.dataset.num;   }

index 为传递的参数num

全局配置

文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

图片组件image

<image> 组件默认宽度 300px、高度 225px;

去掉图片的默认宽度: 

 <image src="/images/pic2.png" mode="widthFix" />

input属性

type的合法值

app.json

pages

pages创建路径后,会自动创建文件夹和文件

window

设置顶部

tabBar

设置底部导航

页面内部json:index.json

只能设置顶栏的样式

小程序生命周期

小程序初始化onLaunch - 小程序启动onShow - 页面加载onLoad -页面显示onShow -页面渲染onReady -小程序隐藏onHide

引用变量示例

上一篇 下一篇

猜你喜欢

热点阅读