zoukankan      html  css  js  c++  java
  • 微信小程序小结

    听说微信小程序火,特地学了几天。做了些笔记。官网资料挺详细的。

    1.简介

    微信小程序是寄生于微信的一种轻量级的APP,它实现触手可及,扫一扫或者直接搜索关键词就可以登录。

    2.官网

    mp.weixin.qq.com

    3.目录结构

    4.快捷键

    ctrl+m  打开或关闭显示界面

    ctrl+   打开或关闭文件数

    ctrl+b   刷新显示界面

    5.像素问题

    在微信小程序开发中,全部采用rpx作为像素单位,它会随着不同机型的宽高进行适配。

    在开发中,建议选用iphone6作为测试界面,是因为在iphone6中,1rpx=0.5px ,这个比例容易折算。

    6.swiper组件

    swiper组件最标准的结构为:

    swiper>swiper-item>image

     如果需要通过for循环来增加项目(swiper-item),那么可以在swiper下面直接添加block标签,使用block标签可以添加对swiper-item的for循环,并且block标签本身不会在页面中呈现。

    7.模板

    模板是用来实现不同页面或者不同区块直接调用代码片段,他是用template来表示,template可以是单标签,也可以是双标签。

    <template name=”muban”>

    代码片段...

    </template>

    <template is=”muban” data=”{{...xinxi}}” />

    备注:单标签的template是用来绑定某个已有name的template,通过...来选中js中的data里面的数据。

    重点:假如需要在另一个页面中引入这块模板,那么另一个页面的wxml必须有这么两个标签:

    <import src=”” />

    <template is=”muban” data=”{{...xinxi}}” />

    备注:src中的地址必须精确到.wxml

    8.列表渲染

    使用block标签来进行代码片段的for循环:

    wxml:

    <block wx:for=”{{arr}}”>

    <view>{{name}}</view>

    </block>

    js:

    data:{

    arr:[{

    name:’张三’

    },{

    name:’李四’

    },{

    name:’王五’

    }]

    }

    仿星巴克的用星说截图:

  • 相关阅读:
    【Office Web Apps】在 SharePoint 中使用 Office Web Apps
    css轮廓
    css定位
    css盒子模型 css3盒子相关样式
    css常用操作
    css3选择器
    强制换行和禁止换行
    text-transform 字母的大小写
    css hack
    JavaScript基本语法
  • 原文地址:https://www.cnblogs.com/daiwei1981/p/6610470.html
Copyright © 2011-2022 走看看