总结
一、三个重要的文件：
*.wxml .wxss .js
1
、
index.wxml--
组件
2
、
index.wxss
3
、
index.js
二、函数
1
、创建函数
2
、数据绑定
text
view
button
input
设置样式
整个页面的样式
Page({})
函数的样式
函数名（）
{},
Page({
第一种创建函数的方法
ceshi1(){
console.log("
简单版
")
},
onLoad(){
this.ceshi1()
this.ceshi2()
},
第二种创建函数的方法
ceshi2:function(){
console.log("
复杂版
")
},
带参数的函数
ceshi1(name){
console.log("
传进来的参数是
",name)
},
onLoad(){
this.ceshi1("zhangsan")
},
})
3
、获取用户输入的数据
三、变量
1
、局部变量和全局变量
2
、数据类型
1
、
.wxml
文件
<text bindtap="getName">
点我
</text>
2
、
.js
文件
Page({
getName(){
console.log("
点击了
text
组件，调用了
getName
函数
")
}
})
1
、
.wxml
文件
<input placeholder="
请输入
" bindinput="getNum"></input>
2
、
.js
文件
getNum(shuju){
console.log("
输入的数据是
:",shuju.detail.value)
},
1
、声明变量
var
变量名
2
、给变量赋值
变量名
=
值
1
、
.wxml
文件
<view>
<input placeholder="
请输入姓名
" bindinput="setName"></input>
<button bindtap="getName">
获取姓名
</button>
</view>
2
、
.js
文件
var xingming
var a=1
var b=1
Page({
setName(name){
//
局部变量
// var xingming
xingming=name.detail.value
console.log(xingming)
},
getName(){
a=20
b=20
console.log(xingming)
console.log("a+b
的值是：
",a+b)
},
})
3
、转换
四、运算符
五、条件语句
1
、
Number
类型
2
、
string
字符串类型
3
、布尔型
Boolean
4
、
Undefined --
一个变量声明之后没有赋值
5
、
null
空值
--
一个声明变量，并且赋值
null
null
和
undefined
的值相等，但类型不同
.
typeof
操作符
--
查询变量类型
console.log(typeof b)
1
、转换成字符串类型的三种方法
var num=1
console.log(typeof num)
console.log(num.toString())
console.log(String(num))
console.log(num+"a")
2
、转换成数字型的三种方法
console.log(Number(""))//
空字符串转换为
0
console.log(Number(true))//true
转换为
1
console.log(Number(false))//false
转换为
0
console.log(Number("zhangsan"))//
其他的字符串会转换为
NaN (
不是个数字
)
1
、赋值运算符
+ - * / %
2
、逻辑运算符
&&
逻辑与
--
左边是对并且右边也对，结果才对
;
左边或者右边有错，结果就错
||
逻辑或
--
左边或者右边有一个对，结果就对，左边和右边全错，结果才错
！ 取反
3
、递增或递减
++ --
4
、前置或后置
++d
前置
--
先自加或自减，然后返回值
d++
后置
--
先返回值，然后自加或自减
例
var a = 10
var b = ++a
console.log(b) //
这里
b
的结果是几
11
var c = 10
c++ //11
var d = c++ + 2
console.log(c) //c
是
12
console.log(d) //
这里
d
的结果是几
13
var e = 10
var f = e++ + ++e //
console.log(e) //e
是
12
console.log(f) //
这里
f
的结果是几
22
条件渲染
六、循环语句
for
条件渲染
1
、
if
语句
if(
条件
){
条件正确时要执行的代码
}
例：
var age=19
if(age>=18){
console.log("
你可以进入网吧
")
}
2
、
if else
语句
if(
条件
){
条件正确时执行
}else{
条件错误时执行
}
例：
var age=10
if(age>=18){
console.log("
你可以进入网吧
")
}else{
console.log("
年龄不够，不允许进入网吧
")
}
3
、
if else if
var chengji=90
if(chengji>=90){
console.log("
优秀
")
}else if(chengji>=60){
console.log("
及格
")
}else if(chengji<60){
本行可以去掉
if(chengji<60)
console.log("
不及格
")
}
<text wx:if="{{nm1>nm2}}">
比较结果：第
1
个数大
</text>
<text wx:elif="{{nm1<nm2}}">
比较结果：第
2
个数大
</text>
<text wx:else>
两数相等
</text>
for (
初始化变量
;
条件表达式
;
操作表达式
){
被执行的代码块
}
例：
for
（
var a=1;a<=6;a++
）
{
console.log("
打印中
",a)
}
<view wx:for="{{list}}" class="biao">
<view class="name">{{item.name}}</view>
<view class="age">{{item.age}}</view>
</view>
.js
文件
data: {
continue
和
break
七、数组
1
、创建数组
2
、获取数组的值
3
、求和和平均值
list:[{
name:"zhangsan",
age: 18
},
{
name:"lisi",
age: 19
},
{
name:"wangwu",
age: 17
},
]
},
for(var i=1;i<=5;i++){
if(i==3){
//continue //
第
3
个包子里有
1
条虫子
break //
第
3
个包子里有半条虫子
}
console.log("
我吃的第
"+i+"
个包子
")
}
//
创建数组的第
1
种方式
var name=new Array()
name[0]="
张三
"
name[1]="
李四
"
name[2]="
王五
"
console.log(name)
//
创建数组的第
2
种方式
var name=["
张三
1", "
李四
1", "
王五
1",12,true]
console.log(name)
for(var i=0;i<name.length;i++){
console.log("
第
"+i+"
个元素是：
",name[i])
}
4
、求最大值
5
、增加新元素
6
、删除元素
八、对象
1
、创建对象的第一种方式
var num=[1,2,3,4,5,6]
var sum=0
for(var i=0;i<num.length;i++){
sum=sum+num[i]
}
console.log("
数组的和是：
",sum)
console.log("
数组的平均值是：
",sum/num.length)
var num=[3,2,4,5,1]
var max=num[0]
for(var i=1;i<num.length;i++){
if(max<num[i]){
max=num[i]
}
console.log("
第
"+i+"
次回合的胜利者是：
"+max)
}
console.log(max)
var num=[3,2,4,5,1]
num.push(99,100,199)
console.log(num)
var num=[3,2,4,5,1]
var numNew=[]
for(var i=0;i<num.length;i++){
//
删除
4
if(num[i] !=4){
numNew.push(num[i])
console.log("
旧元素
"+num[i]+"
已添加到新数组
")
}
}
console.log("
新数组的元素是：
",numNew)
2
、调用对象属性和方法
3
、第
2
种方式
3
、第三种方式：使用构造函数
九、内置对象
自带的一些对象，供开发者使用
//var obj={}
var obj={
name:"zhangsan",
age: 19,
sex:"boy",
way(){
console.log("
张三会画画
")
}
}
console.log(obj.name)
console.log(obj.age)
obj.way()
对象名
.
属性名
console.log(obj.name)
对象名
.
方法名
obj.way
var obj=new Object()
obj.name="lisi"
obj.age=18
obj.way = function(){
console.log("lisi
会跳舞
")
}
console.log(obj)
console.log(obj.name)
obj.way
当需要创建三个对象时，需要使用多条重复的命令。此时可以使用构造函数实现。
function Person(name,age,sex){
this.name=name
this.age=age
this.sex=sex
this.action=function(benshi){
console.log(benshi)
}
}
var obj1=new Person("zhangsan",10,"boy")
var obj2=new Person("lisi",10,"boy")
var obj3=new Person("wangwu",10,"boy")
console.log(obj1)
console.log(obj2)
console.log(obj3)
obj1.action("
跳舞
")
console.log(obj1.name)
十、云开发
十一、云数据库
1
、
Math
2
、
Date
3
、数组
Array
- MDN
官方地址：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
- W3cschool
https://www.w3school.com.cn/js/index.asp
-
菜鸟教程
https://www.runoob.com/js/js-tutorial.html
云开发的初始环境设置
1
、找到
AppID
环境
ID
2
、修改
project.config.json
内容
//
第二行增加：
"cloudfunctionRoot":"cloud", //
配置云开发的路径
3
、更改
app.js
文件内容，
// app.js
App({
onLaunch() {
//
云开发环境初始化
wx.cloud.init({
env:"yunjisaun-5gscklsyde3525d6"
})
}
})
4
、新建文件夹为
cloud
1
、创建数据库，并设置权限
2
、增加数据
const DB = wx.cloud.database().collection("list")
addDate(){
DB.add({
data:{
name:"zhangsan",
age:18
// name:this.name,
//age:this.age
},
},
success(res){
console.log("
添加成功
",res)
},
fail(res){
console.log("
添加失败
",res)
}
})
},
3
、查询
getData(){
wx.cloud.database().collection("list").get()
.then(res => {
console.log("
查询成功
",res)
})
.catch(err =>{
console.log("
查询失败
",err)
})
},
条件查询
wx.cloud.database().collection("list")
.where({
name:this.name
})
.get()
.then(res => {
console.log("
返回的数据
",res)
})
4
、删除
delData(){
wx.cloud.database().collection("list")
.doc(id).remove()
.then(res => {
console.log("
删除成功
",res)
})
.catch(err =>{
console.log("
删除失败
",err)
})
},
5
、更新
updData(){
//
第二种办法
wx.cloud.database().collection("list")
.doc(id).update({
data:{
age:age
}
})
.then(res => {
console.log("
更新成功
",res)
})
.catch(err =>{
console.log("
更新失败
",err)
})
},
扫一扫
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
