1、对微信小程序的理解
小程序是一种开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷的获取和传播,同时具有出色的使用体验。
微信小程序的优势:
微信助理,容易推广。
小程序拥有众多入口,这些入口有助于企业更好的获取流量,从而进行转化、变现。使用便捷。
用户在使用小程序时,只需要轻轻点一下就可以使用,更加符合用户对使用方便、快捷的需求,所以小程序的用户数量不断增加。体验良好,有接近原生app的体验。
。在微信生态里,小程序在功能和体验上是可以秒杀掉 H5 页面的,H5 页面经常出现卡顿、延时、加载慢、权限不足等原因,而这些问题在小程序里都不会出现。成本更低。
从开发成本到运营推广成本,小程序的花费仅为APP的十分之一,无论是对创业者还是传统商家来说都是一大优势。
微信小程序的劣势:
单个包大小限制为2M,
这导致无法开发大型的应用,采用分包最大是20M(这个值一直在变化,以官网为准)。需要像app一样审核上架,
这点相对于H5的发布要麻烦一些。处处受微信限制。
例如不能直接分享到朋友圈,涉及到积分,或者虚拟交易的时候,小程序也是不允许的。
2、小程序中wxss和css的异同
WXSS和CSS类似,不过在CSS的基础上做了一些补充和修改
- 尺寸单位 rpx:rpx是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。在不同的手机型号下1rpx=屏幕宽度/750。(phone6下1rpx = 0.5px)
- 样式导入import:可以@import来导入其他的wxss
- 样式选择器:类选择器、id选择器、元素选择器、伪元素选择器
@import './test_0.wxss'
3、小程序中的模板语法WXML(标签、数据、渲染)
1. 标签的使用
在小程序中没有H5提供的那些标签了,这里我们需要使用小程序给我们提供的组件。常用的标签有
- view:相当于div;
- text:相当于span;
- image:相当于img
2. 数据绑定
- 数据定义:
- 引用数据:通过{ {}}的方式可以引用数据。
小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性。
data:{
return {
msg:"hello world",
num: 18,
}
}
3. 数据渲染
- 渲染层和数据相关。
- 逻辑层负责产生、处理数据。
- 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。
<view>{
{
msg }}</view>
Page({
data:{
return {
msg:"hello world",
num: 18,
}
}
onLoad: function () {
this.setData({
msg: 'Hello World2222' })
}
})
4. 逻辑渲染
wx:if和hidden
- wx:if:WXML 中,使用 wx:if=“{ {condition}}” 来判断是否需要渲染该代码块
如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。- hidden:通过hidden属性也可以进行条件渲染。
- wx:if和hidden的异同:
同:都能控制元素的显示与隐藏
异:wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。
<view wx:if="{
{length > 5}}"> 1 </view>
<view wx:elif="{
{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<block wx:if="{
{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<view hidden="{
{condition}}">
隐藏
</view>
5. 列表渲染
wx:for :在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
wx:for-index, wx:for-item 用来指定index和item的别名wx:key:指定列表中项目的唯一的标识符。
要求:需要是列表中唯一的字符串或数字;保留关键字 this: 代表在 for 循环中的 item 本身,并且item本身是唯一的字符串或者数字
作用:能提高重排效率文章来源:https://www.toymoban.com/news/detail-478275.html
<!-- array 是一个数组 -->
<view wx:for="{
{index in array}}" wx:key="{
{index}}">
{
{index}}: {
{item.name}}
</view>
<view wx:for="{
{array}}" wx:for-index="idx" wx:for-item="itemName">
{
{idx}}: {
{itemName.name}}
</view>
对应的脚本文件:
Page({
data: {
array: [{
name: '天亮教育',
}, {
name: '尚云科技'
}]
}
})
6. template(模板)
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 内定义代码片段。
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。文章来源地址https://www.toymoban.com/news/detail-478275.html
定义
<template name="msgItem">
<view>
<text> {
{index}}: {
{msg}} </text>
<text> Time: {
{time}} </text>
</view>
</template>
调用
<!-- msgList:[
{
index: 0,
msg: '这是一段模板',
time: '2020-10-10'
}
] -->
<view wx:for="{
{msgList}}">
<template is="msgItem" data="{
{...item}}"></template>
</view
到了这里,关于微信小程序常见知识点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!