JS交互

bind 和 catch 去绑定（bindtap   catchtap）

其中的区别：bind 存在事件的冒泡 当点击子元素时 会向父元素传播

catch 可以阻止事件的冒泡

console. log()（控制台输出）打印输出

事件对象：事件的状态

先构建wxml 再构建wxss

尺寸单位：rpx 可以根据屏幕尺寸自动确定尺寸

引入外部wxss：@import'./text_0.wxss

@import 相对路径

样式：从第三方样式库引入（WeUI(微信原生样式库) iView Weapp(高质量微信小程序UI组件库) Vant Weapp(轻量可靠的小程序UI组件库)）

网站 中的文档---小程序开发---组件

.js 中 page中的data是初始数据

双大括号来差值调用（数据绑定）

作为遍历：使用wx:for {{index(寻找索引)}} {{item(寻找值)}}循环列表

wx:key {{index}}对应的值一定是一个唯一的值

条件渲染 wx:if  flase不存在           hidden(flase存在只是不显示)

多次调用使用hidden更好

project.config.json  项目配置

app.json   全局配置

page.json  页面配置

.json 配置文件，以json格式存储一些配置（全局配置，项目配置，页面配置）

.wxml 模板文件，藐视页面结构，相当于HTML

.wxss 样式文件，调整页面样式，相当于css

.js 脚本逻辑文件，页面和用户的交互逻辑

小程序中比较好的第三方样式库：

WeUI：微信小程序官方提出的样式库，是一套同微信原生视觉体验一致的基础样式库；

IView Weapp：一套高质量的微信小程序UI组件库，不止有小程序的还有PC端的样式，更有后台管理系统；

Vant Weapp：轻量、可靠的小程序UI组件库

bindtap与catchtap的区别：bindtap允许事件冒泡，catchtap不允许事件冒泡；

使用setData不然改变不了值，

this.setData({

    count:this.data.count+1;

})

bindtap:事件绑定不会组止冒泡事件向上(父元素)触发

catchtap:事件绑定可以阻止冒泡向上(父元素)触发

微信支付、卡包、附近小程序等功能。

云数据库的理解

一、修改进入小程序后的默认界面

当进入小程序后，默认页面是 app.json 里面pages 的第一个地址。如果想要进入pages 第二个地址，需要修改下 在导航栏中有一个 "普通编译"按钮，点击它 -> 点击 "添加编译按钮" -> 修改 "启动页面"的地址即可。

二、给界面添加数据库

1、初始化数据库

    在 "cloud.js" 文件的第一行，添加 const db = wx.cloud.database();

2、插入数据

    在 "cloud.wxml" 中 添加一个按钮 , bindtap = "insert"

    在 "cloud.js"  中 ， insert: function() {... ... },

    在 "云开发"  -> "数据库" -> "添加集合 " -> 如 “User”

    回到 "cloud.js"  中 

insert: function() {
    db.collection('User').add ({
        data:{
            name: 'jerry',
            age: 20
        },
        success: res => {
            console.log(res);
        },
        fail: err => {
            console.log(err);
        }
    })
},

2. 第二种插入数据

insert: function() {
    db.collection('User').add({
        data: {
            name: 'jack',
            age: 10
        }
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);}
    )}
},

3. 更新数据

通过 doc('id名称').update() 

updata: function() {
    db.collection('User').doc('6cd397ca5ce251e202264f061f1f78d5').update({
        data: {
            age: 23
        }
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
},

 4. 查找数据

search: function() {
    db.collection('User').where({
        name: 'jerry'
    }).get().then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
},

5. 在云开发控制台 手动输入一个 name = jerry 的用户，使用代码查找不到。这是因为 权限设置的原因，修改权限为 所有用户都可读写。

6. 删除数据

delegate: function(){
    db.collection('User')
    .doc('6cd397ca5ce251e202264f061f1f78d5')
    .remove()
    .then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
},

关键节点：

数据类型:Geo Point:地理位置点

数据库初始化:const db = wx.cloud.database()

切换环境:

    const testDb = wx.cloud.database({

            env:'test'

})