乐趣区

关于前端:考研刷题小程序云开发实战基础知识储备1

jiezi

前言

你须要在本地装置微信开发者工具，初始化考研刷题小程序我的项目，意识我的项目目录构造与配置文件。

因为本我的项目技术栈基于 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 引入，用的是相对路径。

退出移动版