[移动开发]小程序基础知识

一、基础要点

1.标签

text 相当于web中的 span标签?行内元素 不会换行?

view 相当于web中的 div标签?块级元素 会换行

block 占位符的标签 写代码的时候可以看到这标签存在 页面渲染小程序会把它移除掉

? ? ? ? ? （如果不想额外的添加标签可以使用block）

使用vscode编辑器，可安装?微信开发助手 插件

? ? ? ? 快捷键：鼠标插入多行：alt+鼠标左键? 复制多行：鼠标+alt+往下拖动

2.数据绑定

wxml:

<!--1 字符串-->
<view>{{msg}}</view>  
<!--2 数字类型-->
<view>{{num}}</view>
<!--3 bool类型-->
<view>{{isGril}}</view>
<!--4 object类型-->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!--5 在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--6 使用bool类型充当属性 checked  字符串和花括号之间一定不要存在空格，否则会导致识别失败-->
<view>
    <checkbox class="" value="" disabled="" color="" checked="{{ischecked}}"></checkbox>      
</view>


js:

data: {
    msg:"hello mina",
    num:1100,
    isGril:false,
    person:{
      age:49,
      height:156,
      weight:130,
      name:'富婆'
    },
    ischecked:false,
  },

3.运算

运算 =>表达式

1.可以在花括号中 加入 表达式? ≠? " 语句 "

2.表达式：指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算...

? ? ? ? a.数字的加减

? ? ? ? b.字符串拼接

? ? ? ? c.三元表达式

3.语句：指的是复杂的代码段

? ? ? ? a.if else

? ? ? ? b.switch

? ? ? ? c.do while...

? ? ? ? d.for...

<view>{{1+3}}</view>
<view>{{"1"+"3"}}</view>
<view>{{10%2 === 0 ? "偶数" : "奇数"}}</view>

? 4.数组和对象循环? ?wx:for

? ? ? ? 列表循环

? ? ? ?a.wx:for="{{数组或者对象}}"? wx:for-item="循环项的名称"? wx:for-index="循环项的索引"

? ? ? ?b.wx:key="唯一的值"? 用来提高列表渲染的性能

? ? ? ? ? ? 1. wx:key 绑定一个普通的的字符串的时候，那么这个字符串名称肯定是循环数组中

? ? ? ? ? ? ? ? 的对象的唯一属性

? ? ? ? ? ? 2.wx:key="*this"? 就表示 你的数组 是一个普通的数组? *this 标识是循环项

? ? ? ? ? ? ? ?[1,2,3,4,5]

? ? ? ? ? ? ? ?["1","222","aaa"]

? ? ? c.当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称 不要重名? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?wx:for-item="item"? ?wx:for-index="index"

? ? ? d.默认情况下，我们不写 （wx:for-item="item"? ?wx:for-index="index" ）

? ? ? ? ? ? ? 小程序也会把循环项的名称和索引的名称 item 和 index

? ? ? ? ? ? ? 只有一层循环的话? （wx:for-item="item"? ?wx:for-index="index" ） 可以省略

<view 
    wx:for="{{list}}" 
    wx:for-item="item"      //单层循环这里可以省略
    wx:for-index="index"    //单层循环这里可以省略
    wx:key="id"    
>
    {{item.name}}
</view>

????????对象循环

? ? ? ? ? ??a.wx:for="{{对象}}"? wx:for-item="对象的值"? wx:for-index="对象的属性"

? ? ? ??????b.循环对象的时候最好把item和index的名称修改一下

? ? ? ? ? ? ? ? wx:for-item="value"? wx:for-index="key"? ? ? ? ? ? ? ? ?

<view 
wx:for="{{person}}" 
wx:key="age" 
wx:for-item="value" 
wx:for-index="key">
    属性：{{key}}
    值：{{value}}
</view>

5.条件渲染

? ? ? ? a. wx:if="{{true/false}}" 显示/隐藏

? ? ? ? ? ? ?if，else，if else

? ? ? ? ? ? ?wx:if????????

? ? ? ? ? ? ?wx:elif

? ? ? ? ? ? ?wx:else

? ? ? ? ? b. hidden

? ? ? ? ? ? ? ?1.在标签上直接加入属性 hidden

? ? ? ? ? ? ? ?2.hidden="{{true}}"

? ? ? ? ?注：什么情境下用哪个????????

? ? ? ? ? ? ? ? 1.当标签?不是频繁的切换显示 优先使用 wx:if? ( 直接把标签从页面结构给移除掉 )

? ? ? ? ? ? ? ? 2.当标签频繁切换显示的时候优先使用hidden ( 通过添加样式的方式来切换显示?)

? ? ? ? ? ? ? ? ? ? 所以hidden 不能 和 display 一起使用

? ? 6.事件绑定

? ? ? ? ? ?小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 ??. 在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值 ? ?. 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 ? ?. 通过 this.setData 将文本框最新的 ?value 值 赋值给 动态绑定的value值 content ?即可实现数据的双向绑定

? ? ? ? ? ? ? a. 需要给input标签绑定 input事件

? ? ? ? ? ? ? ? ? 绑定关键字? bindinput

? ? ? ? ? ? ? ?b. 如何获取 输入框的值

? ? ? ? ? ? ? ? ? ?通过事件源对象来获取

? ? ? ? ? ? ? ? ? ?e.detail.value

? ? ? ? ? ? ? ? c. 把输入框的值赋值到data当中 不能直接

? ? ? ? ? ? ? ? ? ? ?1.this.data.num = e.detail.value

? ? ? ? ? ? ? ? ? ? ? 2.this.num =? e.detail.value

? ? ? ? ? ? ? ? ? ? 正确的写法

? ? ? ? ? ? ? ? ? ? ? ? this.setData({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?num:e.detail.value?

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ?d. 需要加入一个点击时间?

? ? ? ? ? ? ? ? ? ? ? ? 1. bindtap

? ? ? ? ? ? ? ? ? ? ? ? 2. 无法在小程序当中的 事件中 直接传参

? ? ? ? ? ? ? ? ? ? ? ? 3.? 通过自定义属性的方式来传递参数

? ? ? ? ? ? ? ? ? ? ? ? 4.?事件源中获取? 自定义属性

wxml:

 <input type="text" bindinput="handleInput" value="{{num}}" />

 <button bindtap="handletap" data-oper="{{1}}">+</button>   //data-oper 通过自定义属性传参
 <button bindtap="handletap" data-oper="{{-1}}">-</button>

 <view>{{num}}</view>

js:

handleInput(e){
    console.log(e);
    this.setData({
      num:e.detail.value
    })
},
handletap(e){
    // console.log(e);
    // 获取自定义属性 oper
    const oper = e.currentTarget.dataset.oper;    
    // console.log(oper);
    this.setData({                            //this.setData({}) 赋值
      // num:Number(this.data.num) + oper     //this.data.num 获取值
      num:this.data.num*1 + oper*1            //number()转为数字类型  *1隐式转为数字类型
    })
 },

二、样式wxss

1.尺寸单位? ? ?

• rpx（responsive pixel）是小程序所独有的尺寸单位，可根据屏幕宽度进行自适应。
• 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px=1物理像素

建议：开发微信小程序时设计师可以用iphone6作为视觉稿的标准

使用步骤：

1. 确定设计稿宽度 pageWidth
2. 计算比例 750rpx = pageWidth px.因此 1px=750rpx / pageWidth
3. 在less文件中只要把设计稿中的 px = > 750 / pageWidth rpx 即可

2. 样式导入

• wxss 中直接就支持样式导入功能
• 也可以和less 中的导入混用
• 使用@import 语句可以导入外连样式表，只支持相对路径

?

3. 选择器

? ? ? ?需要注意的是， 小程序不支持通配符 * 因此以下代码无效????????

通配符*无效
*{
    padding:0;
    margin:0;
    box-sizing:border-box
}
可改为
view,text,image,navigator ...{
    padding:0;
    margin:0;
    box-sizing:border-box
}

4.小程序中使用less

? ? ?原生小程序不支持less, 其他小程序的框架大体都支持，如wepy , mpvue, taro 等，但仅仅因为一个less功能，而去引入一个框架，肯定是不可取的，因此可以用一下方式来实现。

? ? ? 1. 编辑器是vscode

? ? ? ?2. 安装esay less

? ? ? ?3.在vs code中的设置中加入 如下配置????????

"less.compile":{
    "outExt":".wxss"
}

? ? ? ? 4. 在要编写样式的地方，新建less 文件，如index.less 然后正常编写即可

? ? ? ? 5.也可@import导入

三、常见组件

• 小程序中常用的布局组件?
• ?view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox.等
• 官网文档：view | 微信开放文档

1.view??

? ? ?代替原来的div标签? （ 还可加按下去的样式类）

?2.text

• ?a. 文本标签
• b. 只能嵌套 text
• c. 长按文字可以复制（ 只有此标签有这个功能 ）
• d. 可以对空格? 回车 进行编码

space:

<!-- user-select 文本可选 -->
<text user-select decode>我在这里 &nbsp;哈哈哈</text>  
<!-- decode 编码解析 -->
<view><text decode>姓&emsp;&emsp;名：</text></view>
<view><text decode>手&ensp;机&ensp;号：</text></view>
<view><text decode>收货地址：</text></view>

3.image

• 小程序打包上线要求不能超过2M，建议图片使用外网图片
• 默认支持懒加载??lazy-load （图片懒加载，在即将进入一定范围（上下三屏）时才开始加载）
• image | 微信开放文档
• image默认组件宽度 ：320px 高度：240px

• mode

  string

  ?默认：scaleToFill

  图片裁剪、缩放的模式

  模式	值	说明
  缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素?
  缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。（常用）
  缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。（少用）
  缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变（常用）
  缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变
  裁剪	top、bottom、left...	不缩放图片，只显示图片的 “ 顶部 ” 区域

4.swiper | 微信开放文档

• 轮播图外层容器 swiper
• 每个轮播项 swiper-item
• autoplay? 自动轮播
• interval 修改轮播时间
• circular 衔接轮播
• indicator-dots 显示 指示器 分页器 索引器
• indicator-color 指定未选择的颜色
• indicator-active-color 选中时指示器的颜色
• swiper 标签存在默认样式? ?width 100% height:150px? image 存在默认宽高?
• 原图的宽度 和高度 1125 * 352 px?

1. ?swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
2. ? swiper 高度 = swiper 宽度 * 原图的高度 /?原图的宽度
3. ? height:100vw * 352 / 1125

<swiper autoplay interval="1000" circular indicator-dots indicator-color="pink" indicator-active-color="deeppink">
    <swiper-item><image mode="widthFix" src="//xxxx.com/1.jpg" /></swiper-item>
    <swiper-item><image mode="widthFix" src="//xxxx.com/2.jpg" /></swiper-item>
    <swiper-item><image mode="widthFix" src="//xxxx.com/3.jpg" /></swiper-item>
</swiper> 

// less
swiper{
    width: 100%; 
    height: calc(100vw * 352 / 1125);
    image{
        width: 100%;
    }
}

5.navigator | 微信开放文档

• 导航组件 类似超链接标签
• 块级元素 默认会换行 可以加宽度高度

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>

? 6.rich-text | 微信开放文档

? ? ? ?富文本标签? nodes

1. 标签字符串（最常用）?<rich-text class="" nodes="{{html}}"></rich-text>
2. 对象数组

?

总结