微信小程序个人笔记

最新推荐文章于 2021-05-28 10:42:31 发布

yi742891270

最新推荐文章于 2021-05-28 10:42:31 发布

阅读量438

点赞数

分类专栏：微信小程序文章标签：小程序 mongodb node.js

本文链接：https://blog.csdn.net/yi742891270/article/details/112776651

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、跳转

1、

wx.navigateTo({ url: 'pages/myDemo/myDemo?id=1&other=abc' })

[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶上，也就是用户所看到的界面

使用 wx.navigateTo({ url: 'pageD' }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成[ pageA, pageB, pageC, pageD ]。注意，最多10层，超过会BUG
使用 wx.navigateBack()可以退出当前页面栈的最顶上页面，此时页面栈变成 [ pageA, pageB, pageC ]。
使用wx.redirectTo({ url: 'pageE' })是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]，当页面栈到达10层没法再新增的时候，往往就
用于跳转页面，类似get请求

2、跳转传值

1）navigator

<navigator  url="/pages/runner_list/index?type=1">
 </navigator>

像a标签一样，跳转到另一个网页后，js接受值

  onLoad: function (options) {
  //接受数据
  	console.log(options.type)
    this.setData({
      tabIndex: options.type||1
    })
  },

这个怎么做到的，我也不知道，就会抄

2）view点击函数


  <view  bindtap="click"  bindtap="foodBindTap" data-id="{{item._id}}">
    </view>

data-id进行赋值，这在一个循环里面的，item是其ID值
foodBindTap为点击函数

看js

  foodBindTap(e){
    console.log(e)
	console.log(e.currentTarget.dataset.id)
	
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/runner_food/index?id='+id,
    })	
  }

在这里插入图片描述
使用wx.navigateTo后，在url的js文件接受参数

  onLoad: function (options) {
    console.log(options.id)
  },

b00064a7600841b10045cee104092c1d

3）页面跳转传对象

  change(e){
      var sfood = e.currentTarget.dataset.sfood
      console.log(sfood)
      // object转化为json格式
      var jsonSfood = JSON.stringify(sfood);
      wx.navigateTo({
        url: '/pages/sponsor_food/index?jsonSfood='+jsonSfood,
      })
  }

sponsor_food的js

  onLoad: function (options) {
    var that = this


    if(options.jsonSfood!=null){
    	//将json格式转化为对象
      var jsonSfood = JSON.parse(options.jsonSfood)
      console.log(jsonSfood)    
      this.setData({
        form:jsonSfood.food,
        jsonSfood:jsonSfood,
        change:true
      })
    }
    
  },

3、跳转到tabbar

          wx.switchTab({
            url: '/pages/user/user',
          })

二、设值

this.setData({ msg: 'Hello Worldddddd' })

key ==>value 形式

三、for循环

wx:for=""
index默认下标
item默认表示值

2）全局变量

//设值
wx.setStorage({
  key:"key",
  data:"value"
})
//取值
wx.getStorage({
  key: 'openid',
  success(res){
    console.log(res)
    that.setData({
      openid:res
    })
  }
})
//取值2
var user_data = wx.getStorageSync('user_data')

四、发送请求

比如一个js文件

  showDBData:function(){
    var that=this
    wx.request({
      url: 'http://localhost:8081/holiday_history/1',
      method:'GET',
      header: {
        'content-type': 'application/json' // 默认值
        },
      success:function(res){
        console.log(res.data.data)
        that.setData({msg:res.data.data})
      }  
    })
  }

五、云开发

1、初始化

开通云开发，project.config.json添加"cloudfunctionRoot":"cloud"
app.js的onLaunch函数添加

    //云开发
    wx.cloud.init({
      env:"errand-xxx"//ID
    })

2、增删改查

删就一样remove
wxml

<button bindtap="addData">点击添加数据</button>
<button bindtap="findAll">点击查看全部数据（最多20）</button>
<button bindtap="findByName">根据名字查找</button>
<button bindtap="updateAge">润泽年龄变成23</button>

在这里插入图片描述
js

// pages/crud/crud.js
//数据库初始化
const DB = wx.cloud.database().collection("list")

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
//添加数据
  addData:function(){
    DB.add({
      data:{
        name:"小强君",
        age:22,
        hobby:["打游戏","敲代码","听音乐"]

      },
      success(res){
        console.log("添加成功",res)
      },
      fail(res){
        console.log("添加失败",res)
      }
    })
  },
  findByName(){
    DB.where({
      name:"林润泽"
    })
    .get({
      success:function(res){
        console.log(res.data)
      }
    })
  },
  findAll(){
    DB.get({
      success:function(res){
        console.log(res.data)
      }
    })
  },
  updateAge(){
    DB.where({
      name:"林润泽"
    }).update({
      data:{
        age: 23
      },
      success:function(res){
        console.log(res)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3、云函数

1）创建

project.config.json记得添加 "cloudfunctionRoot":"cloud"，单官方手册说是cloudbaseRoot，但前者也能用
就是记得初始化啦

然后在cloud文件夹中右键-新建Node.js云函数

在这里插入图片描述
就会自动生成3个文件

其中，js文件内容自动生成如下

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

2）使用

改下云函数吧

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
//两数之和
exports.main = async (event, context) => {
  let a = event.a;
  let b= event.b;
  return a+b
}

改完后，本地还不能用，一定要在add这个云函数右键-上传并部署安装依赖（不安装node——moudles）

wxml如下

<!--pages/cloudDemo/cloudDemo.wxml-->

<button bindtap="demo01">云函数加法相加</button>

在对应js使用它

// pages/cloudDemo/cloudDemo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  demo01(){
  //调用云函数
    wx.cloud.callFunction({
  	  //云函数的名字
      name:"add",
      //云函数的参数
      data:{
        a:1,
        b:2
      },
      //成功后
      success(res){
        console.log("添加成功",res)
      },
      //失败后
      fail(res){
        console.log("添加失败",res)
      }
    })
  }
})

在这里插入图片描述

添加成功 {errMsg: “cloud.callFunction:ok”, result: 3, requestID: “83492046-5a2e-11eb-a89f-525400e5615d”}errMsg: "cloud.callFunction:ok"requestID: "83492046-5a2e-11eb-a89f-525400e5615d"result: 3__proto__: Object

4、获取用户资料

App.js

App({
  onLaunch() {
    //云开发
    wx.cloud.init({
      env:"errand-9g43qz8bd2f1d0a1",
      traceUser: true//将用户访问记录到用户管理中
    })
  }
})

cloudDemo.js

  onLoad: function (options) {
    var that = this
    //利用官方的获取信息
    const wxUserInfo = wx.getUserInfo({
      success:function(res){
        //userInfo是用户信息
        var userInfo = res.userInfo
        console.log("获取用户信息成功")
        that.setData({userInfo:userInfo})
        console.log(userInfo)
      }
    })
  }

xvml

<view>昵称：{{userInfo.nickName}}</view>
<view>国家：{{userInfo.country}}</view>
<view>头像：<image src="{{userInfo.avatarUrl}}"></image></view>

在这里插入图片描述

获取用户信息成功

avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/ghTMY121pD7wxBbiaehWnz5QIiaVgYNG7oHORwXhB7btxcpl0A8bsOs4zZcKpBtDAsKSJiaGZ8D8fgpx64HIHbX5Q/132"
city: "Zhanjiang"
country: "China"
gender: 1
language: "zh_CN"
nickName: "小强君"
province: "Guangdong"

5、获取用户ID？（openId）

用到云函数
云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    //用户ID？
    openid: wxContext.OPENID,
    //应用小程序ID
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
}

wxml

<button bindtap="userInfo">点我</button>
appid：{{appid}} <view></view>
openId:{{openId}} <view></view>
unionid:{{unionid}}

  userInfo(){
    var that=this;
    wx.cloud.callFunction({
      name:"userInfo",
      data:{
        code:true
      },
      success(res){
        console.log(res)
        that.setData({appid:res.result.appid})
        that.setData({openId:res.result.openid})
        that.setData({unionid:res.result.unionid})
      },
      fail(res){
        console.log("失败",res)
      }
    })
  },

控制台

errMsg: "cloud.callFunction:ok"
requestID: "f274edf1-5a5d-11eb-835d-52540064cc91"
result:
appid: "wxac0589358ccdf1fe"
event:
code: true
userInfo: {appId: "wxac0589358ccdf1fe", openId: "不给你看"}
__proto__: Object
openid: "oQuOH5FW0k5DHAwIH4ZG5-k-l--g"
unionid: ""

在这里插入图片描述

6、导入weui

导入weui的UI包，方便好多了呢

1）app.json

加入

  "useExtendedLib": {
    "weui": true
  }

2）使用，比如使用icon包

去官网文档，
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html
在对应的pages里面导入json

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}

然后再wxml中使用

<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
<mp-icon icon="add2" color="black" size="{{25}}"></mp-icon>

在这里插入图片描述
更多的包看文档

7、时间格式

直接拿时间过来用是不行的，会显示obj类型，在js里面改：

create_time = create_time.toLocaleDateString()

8、云函数获取数据库数据

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  var that = this
  const wxContext = cloud.getWXContext()
  
  //查询数据库
  await db.collection('user_data').where({
  	//ID直接根据获得
    _openid:wxContext.OPENID
  }).get().then(res => {
	//设置值
    user_data = res.data[0]
  })

  return {
  	//这里赋值
    user_data,
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
}

app.js直接调用返回结果
在这里插入图片描述
妙啊

9、刷新

微信小程序没办法刷新，但是有个函数

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

每次来到这个页面都会触发这个函数，就是说可以重定向来到某个页面，在该页面的onReady执行对应得操作

          wx.redirectTo({
            url: '/pages/user_data/index',
          })

10、弹出消息

1）不用点击的

wx.showToast({
  title: '操作成功！', // 标题
  icon: 'success',  // 图标类型，默认success
  duration: 1500  // 提示窗停留时间，默认1500ms
})

在这里插入图片描述

2）不用点击的，延迟跳转

        wx.showToast({
          title: '操作成功！', // 标题
          icon: 'success',  // 图标类型，默认success
          duration: 1000  // 提示窗停留时间，默认1500ms
        })
        //1s后跳转到某个页面
        setTimeout(function(){
        	//先返回
          wx.navigateBack()
          //再刷新
          wx.redirectTo({
            url: '/pages/admin/admin_list/index',
          })
        },1000)

3）要点击的

    wx.showModal({
      title: '提示',
      content: '提交成功！',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.navigateBack()
        } else if (res.cancel) {
          console.log('用户点击取消')
          wx.navigateBack()
        }
      }
    })

11、表单验证

https://blog.csdn.net/weixin_41041379/article/details/82017301

12、where state = 1 or state = 0

sql倒知道，但这mongoDB，还是微信小程序封装好的，就很神奇
上面这个不知道怎么，但是知道where state != 2

	//这两个最重要
	const DB = wx.cloud.database();
	const _ = DB.command
	
    var that = this
    var food = DB.collection("sponsor_food")
    
    food.where({
      state:_.not(_.eq(2))
    }).get({
      success:function(res){
        that.setData({
          food:res.data
        })
        console.log(that.data.food)
      }
    })

更多看
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/command/Command.not.html

现在解决了，where state = 0 or state = 1

state:_.or(_.eq(1),_.eq(0)),

13、修改数据库中非本人创建的记录

傻逼小程序，修改数据，如果_openid不是本人，就无法修改那条记录，真是日了狗了，官方也没说只能修改自己的

办法
https://blog.csdn.net/NirvanaGF/article/details/100709904?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control
就是如果是云函数，就可以修改别人的

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()


// 云函数入口函数
exports.main = async (event, context) => {

  var id = event.accept_id;
  var name = event.accept_name;
  var phone = event.accept_phone;

  //如果是更新外卖表
  if(event.type==1){
    return await db.collection("sponsor_food").where({
      _id:event.id
    }).update({
      data:{
        state:1,
        accept_id:id,
        accept_name:name,
        accept_phone:phone
      }
    })
  }
    //如果是更新快递表
    if(event.type==2){
      return await db.collection("sponsor_express").where({
        _id:event.id
      }).update({
        data:{
          state:1,
          accept_id:id,
          accept_name:name,
          accept_phone:phone
        }
      })
    }
    //如果是更新东西表
    if(event.type==3){
      return await db.collection("sponsor_thing").where({
        _id:event.id
      }).update({
        data:{
          state:1,
          accept_id:id,
          accept_name:name,
          accept_phone:phone
        }
      })
    }

}

调用

  accept(){
    var that = this
    var user_data = wx.getStorageSync('user_data')
    

    wx.cloud.callFunction({
      name:'accept_update',
      data:{
        state:1,
        accept_id:user_data._openid,
        accept_name:user_data.data.name,
        accept_phone:user_data.data.phone,
        id:that.data.sFood[0]._id,
        type:1
      },success(res){
          wx.showModal({
          title: '提示',
          content: '接单成功',
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              wx.switchTab({
                url: '/pages/runner/runner'
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
              wx.switchTab({
                url: '/pages/runner/runner'
              })
            }
          }
        })

      }
    })

  }

14、加载网络图片

<image class="widget_arrow2" src="https://img-blog.csdnimg.cn/20190523090847832.png" mode="aspectFill"></image>

其中，默认尺寸320*240，所以需要有个mode属性来控制尺寸

详情https://developers.weixin.qq.com/miniprogram/dev/component/image.html

15、加入客服

先开通客服功能
在这里插入图片描述

<button open-type='contact' session-from='' >客服-联系我们</button>

在这里插入图片描述

客服可以在这里回

16、将图片加入存储、使用存储中的图片

1）上传图片

      <mp-cell>
          <view></view>
          <view slot="footer">上传3张图片（身份证正反面、学生证）</view>
      </mp-cell>
      <!-- 我这里选择图片并且上传了-->
      <button type="primary" plain="true" bindtap="uploadImg">上传图片</button>
      <!--显示图片 -->
      <image wx:for="{{img}}" src="{{item}}" mode="aspectFill" alt=""></image>

在这里插入图片描述

 uploadImg(){
    var that = this
    var openid = wx.getStorageSync('openid');
    // 让用户选择一张图片
     wx.chooseImage({
    //最多选择多少张
    count: 3,
    //原图与压缩
    sizeType: ['original', 'compressed'],
    //照相或者从相机选择
    sourceType: ['album', 'camera'],
    success:function(e){
      that.setData({
        img:e.tempFilePaths //存图片到img数组
      })
      for(let i = 0 ;i < e.tempFilePaths.length; i++){
        wx.cloud.uploadFile({//上传到云存储
          cloudPath:openid+'_'+i+'.png',//云端存储路径
          filePath: e.tempFilePaths[i], //图片的临时路径
        })
      }
      wx.showToast({
        title: '上传成功',
      })
      },
      fail:function(){
        wx.showToast({
          title: '上传失败',
        })
      }
    })
  }

在这里插入图片描述

2）使用存储中的图片

onLoad: function (options) {
    var that = this


    wx.cloud.downloadFile({
      fileID: 'cloud://errand-9g43qz8bd2f1d0a1.6572-errand-9g43qz8bd2f1d0a1-1304807663/oQuOH5FW0k5DHAwIH4ZG5-k-l--g_0.png', // 文件 ID
      success: res => {
      	//设值
        that.setData({
          img:res.tempFilePath
        })
        // 返回临时文件路径
        console.log(res.tempFilePath)
      },
      fail: console.error
    })


  },

控制台

http://tmp/Hwq9jlOjIbypc314381fd1a99a7cef89ac88cc40c10d.png

wxml

<image src="{{img}}"></image>

这样就调用图片了

17、预览图片

<image src="{{img1}}" bindtap="preImg" data-src="{{img1}}" mode="aspectFit"></image>

img1是一个url地址，就是点击这个图片发生preImg函数，通过data-src="{{img1}}"传url的值

  preImg(e){
    var src=e.currentTarget.dataset.src;//获取data-src的值
    //图片预览
    wx.previewImage({
      urls: [src],
    })
  }

在这里插入图片描述

yi742891270

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录