【Chapter3】微信小程序基础知识

---

一、简介

这里主要简要讲制作小程序需要实现了解的内容，由于网上的相关资料很多，这里我只做归纳和整理。在具备这些基础认知之后，就可以自己动手捣鼓啦

二、内容

1、组成

1.1 云端部分：

login是自带的云函数，runDB是我自己创建的云函数。login函数可以获取用户的openid，runDB可以操作数据库，比如增删改添等，后面文章会讲到

1.2 页面部分：

里面的images放置图片；pages是小程序的页面，里面一定有个index的页面，这里是小程序的开始页面（进入页面）；app的是全局的东西。

1.3 自定义组件：

componts可以创建自己定义的组件，后面的文章会讲到

---

2、变量

2.1 全局变量

全局变量放置在app.js文件中，注意赋值方式为冒号，会一直保存直到关闭程序

 this.globalData = {
      //用户id
      openid:'',
 }

在其他页面使用全局变量需要先实例化，将这句代码写入page的js文件里

const app = getApp()

//使用全局变量
var tempt = app.globalData.openid

2.2 局部变量

会一直保存直到页面关闭

Page({
  data: {
    openid:'',
  },
})

把全局变量的值赋给局部变量

this.setData({
         openid:app.globalData.openid,
        })

使用局部变量

var tempt = this.data.openid

2.3 变量

这里顺便讲数据类型，其实很简单，使用的也只有几种：string、number（部分int、float这些）、boolen、array、object、date……object经常是res返回的数据

var tempt = '', //string
var tempt = false, //boolen
var tempt = 0, //number
var tempt = [], //array
var tempt = Date.now() , //date

---

3、语句

3.1 在wxml中

//判断语句
wx:if = "{{true}}"

//循环语句
wx:for = "{{list}}}" wx:key = "{{item}}"

3.2 在js中

与C语言一样

//判断语句
if(true){

}else{

}

//循环语句
for(var i = 0; i < number , i++){

}

3.3 数组操作

• 使用concat合并数组

var tempt = []
for (var i = 0; i < res.result.data.length; i++) {
   tempt = tempt.concat(res.result.data[i].topicID)
 }

• 使用push合并数组
  这样没用到，大家网上搜索一下他们的不同吧，很简单。

• 获取数组长度（尤其是判断 res.data 是否为空，经常使用）
  如果res为空，结果是0。这个相当好用，不能使用res.data.length，因为如果数据不为空，res.data就会变成 res.data[index].length！

云函数获取数据库返回

Object.keys(res.result.data).length

数据库返回

Object.keys(res.data).length

3.4 注释

小程序不支持递归操作，如果要的话只能

var tempt = 0
for (var i = 0; i < number; i++) {
   //操作
   if( i == number-1 ){
   		tempt = 1
   	}
}

if( tempt == 1){
	for (var i = 0; i < number; i++) {
	 //操作
	}
}
//以此类推，有点头疼哦

不然就要叠加几层，代码比较乱，最后就不要叠太多层了。

在后面数据库只能一次取20个值，云函数操作一次可取100个值，就会碰到这个头疼的问题了

for (var i = 0; i < number; i++) {
   //操作
   if( i == number-1 ){
		for (var i = 0; i < number; i++) {
		 //操作
		 // ……
		}
   	}
}

如果这样写，无效.tempt会一直是 5。（啊这个大坑）

var tempt = 0
for (var i = 0; i < 5; i++) {
   //操作
	tempt++
}
for (var i = 0; i < 5; i++) {
 //操作
 	tempt++
}

//……

---

最后还是例行一段：

最近用了一周写了一个仿知乎的小程序，将会陆续整理，包括前端页面设计与后端逻辑、数据库和云函数操作等，以及自己遇到的坑。之前也没有学过javascript和数据库，css和html大概知道，用了一天看数据库、php、vue，后来为了设计美观，用一早上看css和html，就可以开始做了，所以算是零基础的新手训练哦。感兴趣就关注吧