前言

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

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