样式 WXSS

尺寸单位 rpx , 可以根据屏幕宽度自适应。

规定屏幕宽度为 750rpx。如 iphone6 屏幕宽度为 375px, 共有 750 个物理像素则:750rpx = 375px = 750物理像素 ---> 1rpx = 0.5px = 1物理像素

小程序中不需要进行样式文件引入( link ), wxml 会自动引入同名样式文件。

使用 @import "" 语句导入外两样式表,仅支持相对路径

小程序不支持通配符 ‘*’,下列代码无效:


* {
    color: #fff;
}

原生小程序不支持 less ,但可以通过安装插件实现 vscode -> Easy LESS

组件

小程序中常用的布局组件: WeUI : view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox...

text 文本标签

属性 user-select, space, decode, ...(不可选中,不显示连续空格,不解码)

decode:(如 <text>a&nbsp;b</text> 默认输入a&nbsp;b, 加上属性 decode 可获得空格
space="": 支持的值 ensp(中文字符空格的一半大小), emsp(中文空格大小), nbsp(根据字体 设置空格大小)

注意: text 组件内仅支持 text 嵌套。 除了文本节点意外的其他节点都不能长按选中。

<text class="" user-select space="nbsp" decode>    
    <!--可选中,按照连续显示空格,解码(转义>
</text>

image 图片组件的默认宽高为 320px-240px, 支持懒加载。默认仅支持网络资源图片

属性 mode , lazy-load ...(图片的剪裁,缩放的模式。默认 scaleToFill(保持比例缩放,完全拉伸至填充盒子。图片懒加载,默认 false。

mode 有 13 中模式,九种剪裁, 4 种缩放 mode模式 更多

lazy-load 为真时 图片懒加载,图片在即将进入一定范围(上下三屏)时才开始加载


swiper 轮播图外层容器,swiper-item 每一个轮播项

注意: swiper 默认宽高为 100%, 150px 。无法被子容器撑开。需要自定义宽高

属性: autoplay, interval, circular, indicator-dots (自动轮播,修改轮播时间, 衔接轮播(没有此属性则 1 -2 -3 -2 -1, 面板指示点


属性 target url, open-type(跳转至那,默认当前小程序。支持相对,绝对路径。跳转方式)

open-type 默认值 navigate,保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 更多


rich-text 富文本标签,可以将字符串解析为对应标签。(并没有完全支持所有 html 标签)

属性 nodes, space (节点列表或者字符串,通过 type 区分,默认为元素节点。是否连续显示空格)

<rich-text nodes="{{html}}"></rich-text>

<rich-text nodes="{{html1}}"></rich-text>
Page({

    /**

     * 页面的初始数据
     */
    data: {
        // 字符串
        html: '<div>hello</div>',
        // 标签列表
        html1: [{
            name: 'div',
            attrs: {
                class: '',
                id: 'html1',
                style: 'color: red;'
            },

            children:[{
                name: 'h1',
                attrs: {},
                children:[{
                    // 文本节点
                    type: 'text',
                    text: 'world'
                }]
            }]
        }]
    },
}

button 按钮

属性 open-type, (微信开放能力,微信开放接口?

<!-- button -->
<button>默认按钮</button>
<button size="mini" type="warn">警告按钮</button>
<button size="mini" type="primary" plain="{{true}}">镂空按钮</button>
<button size="mini" loading="{{true}}" disabled>名称前带 loading图标</button>
<!-- c+d 快速选中单词 -->
<!-- open-type属性 -->
<button open-type="contact">打开客服对话功能</button>
<!-- 在我的真机调试上,消息一直发送不出去 -->
<button open-type="share">转发</button>
<!-- 仅支持分享的好友,不支持朋友圈 -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">获取当前用户手机号</button>
<!-- 需要企业权限,通过事件的回调函数获取 -->
<button open-type="getUserInfo" bindgetuserinfo="getUser">获取个人信息</button>
<button open-type="launchApp">打开app</button>
<button open-type="openSetting">打开内置的授权页面</button>
<!-- 管理已经获得的授权 -->
<button open-type="feedback">打开内置 反馈页面</button>
Page({
    data: {
        // 字符串
        html: '<div>hello</div>',
        // 标签列表
        html1: [{
            name: 'div',
            attrs: {
                class: '',
                id: 'html1',
                style: 'color: red;'
            },

            children:[{
                name: 'h1',
                attrs: {},
                children:[{
                    // 文本节点
                    type: 'text',
                    text: 'world'
                }]
            }]
        }],        
    },

    /* 获取手机号*/
    getPhone(e) {
        // 获取到的是加密后的 数据,需要在后台服务器中进行解析
        console.log(e)

    },
    // 获取用户信息
    getUser(e) {
        console.log(e)
    },
})

icon 小程序自带的图标

属性

  • type 有效值 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size 默认值 23 ,
  • color 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

radio 单选框,需要结合 radio-group 一起使用。圆角选框

checkbox 复选框,用法与此相似。
<!-- 单选框 -->
<view >{{changeMsg}}</view>
<radio-group bindchange="handChange">
    <!-- color 选中后 -->
    <radio value="1" color="blue" checked> 男</radio>
    <radio value="0"> 女</radio>
</radio-group>

<!-- 复选框 -->
<view >{{changeItemMsgs}}</view>
<checkbox-group bindchange="handItemChange">
    <checkbox value="{{item.name}}" wx:for="{{changeMsgs}}" wx:key="id">
        {{item.name}}
    </checkbox>
</checkbox-group>
Page({
    changeMsg: '',
        changeMsgs: [
            {
                id: 0,
                name: 'apple'
            },
            {
                id: 1,
                name: 'grape'                
            },
            {
                id: 2,
                name: 'banana'
            }
        ],
        changeItemMsgs: []
    },
    handChange(e) {
        console.log(e)
        let changeMsg = e.detail.value * 1 ? '男' : '女'

        this.setData({
            // 等价于 changeMsg: changeMsg            
            changeMsg
        })

    },
    handItemChange(e) {
        console.log(e)
        let changeItemMsgs = e.detail.value

        this.setData({
            changeItemMsgs
        })
    },
})

相关推荐:

来自系列:微信小程序开发 - 学习笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号