美文网首页
小程序开发-学习笔记

小程序开发-学习笔记

作者: 落小花cc | 来源:发表于2020-05-11 19:47 被阅读0次

    基础

    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

    引用变量示例

    相关文章

      网友评论

          本文标题:小程序开发-学习笔记

          本文链接:https://www.haomeiwen.com/subject/alkpnhtx.html