这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

微信开发工具

在app.json的pages配置项中加入一行，就会在page文件夹中自动新建文件夹及文件，注意是在微信开发工具中，若在其他编辑器中编辑app.json不会有此效果
project.config.json文件和详情对应
wxss对应css
wxml对应html
js对应js
json对应配置

标签转换

text标签相当于span
view标签相当于div

语法

数据绑定

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

属性绑定

<view data-num=”{{name}}“>
   <text>{{name}}</text>
</view>

注意：双引号和括号之间不能有空格

列表渲染

<!-- wx:for可以循环数组，也可以循环对象-->
<view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">
  {{index}}: {{item.message}}
</view>

block 标签

占位符的标签页面渲染时，看不到此标签

条件渲染

wx:if 方式
hidden方式

<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view hidden="{{false}}">显示</view>
<view hidden="{{true}}">隐藏</view>
<view hidden>隐藏</view>

使用场景标签不是频繁的切换显示，优先使用wx:if（直接把标签从页面中移除掉）标签需要频繁的切换显示的时候，使用hidden（通过添加display的方式，所以hidden不可以和di splay一起使用）

input 绑定事件

使用bindinput绑定input事件

<input type="text" bindinput="handleInput"/>

handleInput:function(e){
    //给data中数据重新赋值，e.detail.value 获得input的值
    this.setData({num:e.detail.value})
  },

button绑定点击事件

使用bindtab绑定点击事件不能直接传递参数，通过自定义属性的方式获得参数

<button bindtap="handleClick" data-type="{{1}}">+</button>

handleClick:function(e){
    //e.currentTarget.dataset获得传递的自定义属性的值
    this.setData({num:this.data.num+e.currentTarget.dataset.type})
  },

设置和获取data中数据

获取 this.data.num
设置 this.setData({num:1})

样式wxss

尺寸单位

rpx:可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx 使用步骤：确定设计稿宽度pageWidth 计算比例750rpx=pageWidth px 1px=pageWidth/750 rpx 利用calc属性： width:calc(750rpx*100/375) 字体大小：1px=2rpx 假设设计稿大小是 375px

样式导入

使用@import 导入外联样式
只支持相对路径
在wxss文件中引入

@import "../style/common.wxss";

选择器

不支持* 的使用
其他选择器和web css中相同

小程序中使用less

原生小程序不支持less 利用编辑器工具来自动使less文件保存的时候生成wxss 这里使用时自行百度，因为还没有学过less

常用标签

view

text

文本标签
只能嵌套text
长按文字可以复制，只有该标签有此特性
可以对空格，会车等进行编码
属性 selectable 文本是否可选 decode 是否解码，若不解码，空格等都显示代码，解码的话，空格才会显示出空格

iamge

图片标签image组件默认宽度320px 高度240px
支持懒加载，利用属性lazy-load来控制是否开启懒加载
mode 指定图片裁剪，缩放时的模式，具体值见api

微信小程序初体验（一）