考研刷题小程序云开发实战-基础知识储备（1）

  • Z时代
  • 2024-01-10
  • 分类：综合

前言

你需要在本地安装微信开发者工具，初始化考研刷题小程序项目，认识项目目录结构与配置文件。

因为本项目技术栈基于WXML、WXSS、JavaScript 、 ES2015+、微信原生 API和云开发等，所以还需要提前了解和学习这些知识，这样会对学习考研刷题小程序云开发实战或者直接使用本项目均有很大的帮助。

1、模板语法

1.1、view标签和text标签

我们现在做的是微信小程序，所以，要使用它的语法。WXML（WeiXin Markup Language）是微信小程序框架设计的一套标签语言。

注意！不要被官方的很官方的概念唬住了，其实就是简单的标签。不信，咱们举个栗子类比看看。相信大多数小伙伴，即使没有做过开发的都听过，html的div和span。

div => view
span => text

view其实相当于div，都是块级元素，也就是会换行的；

text相当于span，都是行内元素，也就是不会换行的。

动手试试吧，在index.wxml直接使用这两个标签就明白了。

<view> 马原 </view>
<view> 毛中特 </view>
<view>
  <text> 思修 </text>
  <text> 近代史 </text>
</view>

什么？还有点迷糊？这样看呢！

保姆级演示，明白了“view是块级元素，会换行的；text是行内元素，不会换行的”这句话了没？

或许我以后不会这么讲了，因为实在是太太太基础了。简单的事情，只说一遍。

不明白不要紧，就像公式，你不用知道是怎么来的，你只要记住公式是怎么用的就行了。

毕竟咱们做的是应用层面的开发嘛，它提供什么API，知道怎么用的，然后直接去使用就行了。如果能举一反三，就更好了。

1.2、数据绑定

在js的data中定义变量：

  data:{
    title:"考研题库小程序",
    num:50,
    isLogin:true,
    user:{
      nickName:"姑苏洛言",
      age:20
    },
    isChecked:true
  }

在 wxml中 直接使用：

<!-- 字符串类型 -->
<view>
    {{title}}
</view>
<!-- 数字类型 -->
<view>
    {{num}}
</view>
<!-- 布尔类型 -->
<view>
    {{isLogin?'你好，xx会员':'请授权登录'}}
</view>
<view wx:if="{{isLogin}}">{{user.nickName}}</view>
<view wx:else="{{isLogin}}"> 请先登录 </view>
<!-- 使用bool类型充当属性check 字符串和花括号之间不要存在空格，否则会导致识别识别  -->
<checkbox checked="{{isChecked}}"></checkbox>
<!-- 对象类型 -->
<view>
    昵称：{{user.nickName}}，年龄{{user.age}}
</view>

再了解一下，其他一些基本运算。

<!-- 算数运算 -->
<view>{{a + b}}</view>
<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 逻辑判断 -->
<view wx:if="{{length > 5}}"> 今日刷题挑战成功 </view>
<view wx:else>今日刷题挑战失败</view>

1.3、列表渲染

列表渲染，其实说白了就是我们说的数组循环。

列表渲染，关键字：

  • wx:for
  • wx:for-item
  • wx:for-index
  • wx:key
wx:for="{{list1}}"
wx:for-item="循环项的名字" => wx:for-item="item" 
wx:for-index="索引项的名字" => wx:for-index="index" 
"循环项的名字" 默认 =  “item”
"索引项的名字" 默认 =  “index”

值有两种：

1）当对数组对象做循环的时候，

list1:[{id:'1', name: '马原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]
wx:key="id"  =>  item.id

2） 当数组是普通数组，

list1: ['马原', '毛中特', '思修', '近代史']
wx:key="*this"

index.js

Page({
  data: {
    // 普通数组
    list1: ['马原', '毛中特', '思修', '近代史'],
    // 对象数组的循环
    list2: [
      {id:'1', name: '马原'},
      {id:'2', name: '毛中特'},
      {id:'3', name: '思修'},
      {id:'4', name: '近代史'}
    ]
  }
})

index.wxml

<view>
  <view>普通数组</view>
  <view wx:for="{{list1}}" wx:key="*this">
    {{index}} --- {{item}}
  </view>
  <view>======================</view>
</view>
<view>
  <view>对象数组</view>
  <view wx:for="{{list2}}" wx:key="id">
    {{index}}:{{item.name}}--{{item.id}}
  </view>
</view>

1.4、条件渲染

1）wx:if

if 、else、 else if 对应微信小程序分别为 wx:if、 wx:else、 wx:elif

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2）hidden

在标签上直接加属性hidden

3）什么场景下使用哪一个？

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

当表示频繁的切换显示，优先使用hiddem 通过添加样式的方式来切换显示。

1.5、事件的绑定

1）绑定事件通过 bindtap+事件名；

2）定义事件的回调需要放在 js文件和data同层级。

.wxml

<view bindtap="handleTap">
     {{num}}
</view>

.js

Page({
     data: {
       num: 0
     },
     // 声明了点击事件的回调
     handleTap() {
       let num = this.data.num;
       num++;
       this.setData({
         num
       })
     }
})

2、样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语言，用于描述 WXML 的组件样式。 与 CSS 相比，

WXSS 扩展的特性有：

  • 响应式长度单位 rpx
  • 样式导入

2.1、app.wxss

app.wxss是默认的全局样式 。把全局的样式的代码都写到这里：

page{
    background-color: aqua;
}

page 标签是页面最外层的标签。

2.2、其他样式

1）在wxss中 不支持 通配符 * 当我们要实现以下功能的时候，

 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

只能够单个标签一个一个的定义了！！！

page,view,text{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

2.3、小程序中的单位 rpx

功能和以前移动端的web中的rem 类似 ，rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx 。 1）不管屏幕多宽 ， 都是 750rpx； 2）不管手机屏幕多宽 都是 100% ；

2.4、样式导入

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

通过@Import 引入，用的是相对路径。

以上是 考研刷题小程序云开发实战-基础知识储备（1） 的全部内容， 来源链接： utcz.com/z/267785.html

回到顶部