Oct1a

微信小程序云开发

微信小程序水平居中,垂直居中

  display: flex;
  justify-content: center;
  align-items: center;

毛玻璃效果(图片模糊)

    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);
            filter: blur(10px);

输入框提示内容 placeholder=""

  "window":{

    "backgroundTextStyle":"light", //下拉提示

    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色

    "navigationBarTitleText": "WeChat", //导航标题文字

    "navigationBarTextStyle":"black", //标题颜色

    "enablePullDownRefresh": "true" //是否开启下拉 默认False

  }

不能直接在json上注释,不然会出现Expecting 'STRING', got INVALID

###bind 和 cath 绑定函数的区别

在组件中使用 bindXXX 属性来绑定事件,如 <button bindTap="tapFunction">按钮</button> ,为按钮组件添加点击事件

在微信小程序中 bind 和 catch 都可以绑定处理事件,但 catch 可以捕获事件,不让事件冒泡传递,bind的事件会传递给父级组件

云数据库

app.js中要加入初始化语句

// 开启云开发
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({

微信小程序云数据库类似于 MongoDB

img

微信小程序云数据库支持的数据类型:

String:字符串

Number:数字

Object:对象

Null:空值

Array:数组

img

以下都使用promise风格的回调函数处理:

db.collection('tag').get().then(res=>{

console.log(res);

}).catch(err=>{

    console.log(err);
 })
 },

手动添加数据库集合(字段),

在使用云数据库时,需要先在js文件中初始化数据库:const db = wx.cloud.database();

切换数据库环境:

const testDB = wx.cloud.database({

env:"test" #云数据名称

})

插入数据

 insert:function(){
    db.collection('user')
    .add({
      data:{
        name:'jerry',
        age:'20'
      }
    })
    .then(res=>{
      console.log('success!')
    })
    .catch(err=>{
      console.log('error')
    })
  },

更新数据

 update:function(){
    db.collection('user')
    .doc('96c1cbbe5cd6e5c6103b4fb019193281')
    .update({
      data:{
        name:'lala'
      }
    })
  },

查询数据

  search:function(){
    db.collection('user')
    .where({
      name:'lala'
    })
    .get()
    .then(res=>{
      console.log(res)
    })
  },

删除数据

微信小程序删除云数据库中单条数据时,可以通过 .doc(‘_id’) 方法定位到数据,然后使用 .remove() 方法删除,微信小程序是没有批量删除权限的,需要调用云函数进行批量删除

 delete:function(){
    db.collection('user')
    .doc('96c1cbbe5cd6e5c6103b4fb019193281')
    .remove()
    .then(res=>{
      console.log('delete success!')
    })
    .catch(err=>{
      console.log('delete error!')
    })
  },

上传文件

upimage:function(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths

        // 选择后上传云数据库
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + '.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            db.collection('images')
            .add({
              data:{
                fileID: res.fileID
              }
            })
            .then(res2=>{
              console.log('updata image success!')

            })
            .catch(err2=>{
              console.log('updata image error'+err2)
            })
          },
          fail: console.error
        })
      }
    })
  },

下载文件

downImg:function(event){
    console.log(event)
    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)
        // 保存图片到手机相册
        wx.saveImageToPhotosAlbum({
          filePath:res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      },
      fail: console.error
    })
  },

小程序文件下载流程

img

img

使用云函数发送请求

第一步: 新建云函数

第二步:安装request 请求库

npm install --save request
npm install --save request-promise

第三步:引入库

var rp = require('request-promise');

第四步:请求网页

#请求例子
rp('http://www.google.com')
    .then(function (htmlString) {
        // Process html...
    })
    .catch(function (err) {
        // Crawling failed...
    });

count方法获取集合总记录数

const result=await db.collection("user").count();

const num=result.total;
// 一行代码
const num=(await db.collection("user").count()).total

遇到的问题

微信小程序开发者工具构建npm提示没找到node_modules目录(解决方法)

必须在npm init后,再用npm install –production,最后在npm i vant-weapp -S –production -verbose,第二步很关键,要是先安装了node_modules, npm init是不起作用的

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。