小程序(白名单.云函数,云函数操作数据库,页面跳转,小程序生命周期,路由传参,获取用户信息)

目录

微信小程序绑定白名单

云函数操作

新建云函数

 调用云函数

 云函数操作云数据库

小程序生命周期

页面的跳转

通过标签跳转

跳转路由传递参数

1.使用标签(路由 传参)传参

通过eventChannel 进行通讯

获取用户信息

---

微信小程序绑定白名单

为了解决非真机调试时在云存储的数据无法获取

 

 将API中的服务器地址(获取数据的接口地址)放上去保存即可(前提:该地址支持https协议)

云函数操作

新建云函数

相当于 服务器端 , node.js

1.新建一个页面,用于学习云函数,在json文件中添加完成后点击contrl+s自动完成文件夹的chuagnj

 2.新建一个文件夹用于放云函数,然后在project.config.json 制定 云函数的目录

"cloudfunctionRoot":"cloudFunctions/",
//固定:"云函数的目录"

 3.保存后文件路径后面会显示环境名work

 

 4.点击云函数文件夹,选择新建node云函数,输入文建名,自动会在文件夹中生成3个文件 

5.修改一下,index.js中的文件内容,点击getdata567文件选择[上传并部署,不上传node_module]按钮

每修改一次就要点击一次.上传

//getDate567--index文件内容


// 云函数入口文件
const cloud = require('wx-server-sdk')
//可以使用wx.cloud.xxx的api
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  //就是写接口
  // console.log  没有意义的,我们是看不见的只能在小程序的服务端看见,在腾讯那呢
  // 访问该函数,返回loveyou
  return "loveyou";
}

//每一次更改了这里面的内容 , 都需要重新右键 -> 上传并部署云端安装依赖

 调用云函数

   //------------------------------------------------- 调用云函数
    // wx.cloud.callFunction({name:"云函数名"}).then(res=>{
    //   // 一般返回的内容 凡在 res.result
//一个云函数一个文件名,getData567就是我们建的文件名
    
    // })
     wx.cloud.callFunction({name:"getData567"}).then(res=>{
     console.log(res);
    
    })

刷新后即可获取到云函数返回的数据

 云函数操作云数据库

1.引入数据库

2.在入口函数中操作数据库

// 云函数入口函数
exports.main = async (event, context) => {
  // -------------------获取数据库中的所有数据,并将结果通过return返回
return db.collection("user").get().then(res=>{
  return res;
})
  
}

3.记得点击getData567文件夹进行更新服务,然后刷新运行即可获取到通过云函数获取到云数据中的信息

云函数不受权限的限制可获取到所有的数据

小程序生命周期

1. onLoad 加载

   • 一般初始请求数据都写在这里

2. onReady 渲染

   • 小bug , 需要借助定时器,解决渲染未完成就操作的问题

3. onShow 展示

   • 如果有tabbar 除了第一次加载 执行 onLoad 之后 每一次切换 , 只显示 onShow 和隐藏 onHide的切换

4. onHide 隐藏

5. onUnload 卸载

   由图可见  onLoad只执行一次

页面的跳转

通过标签跳转

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



<navigator url="/pages/cloudfn/cloudfn" open-type="navigate">用navigate跳转到index有返回箭头</navigator>
<view class="fengexian"></view>

<navigator url="/pages/cloudfn/cloudfn" open-type="redirect">用redirect跳转到index无返回箭头,只能返回主页</navigator>
<view class="fengexian"></view>

<navigator url="/pages/index/index" open-type="switchTab">百度222一下</navigator>

<!-- 
  redirect   : 卸载当前页面 , 只能返回主页 , 再次访问 , 重新加载页面
  navigate   : 隐藏当前页面 , 可以返回上一页
  switchTab  : 专门跳转tabbar 

  一个小程序 页面隐藏 , 最多 只能隐藏 10个 
 -->

 通过API跳转

在wxml文件中添加按钮,点击触发方法

 <!-- 按钮api跳转 -->
 <button type="submit" bindtap="jump">通过api跳转</button>

在js文件中补充方法

// ----------------------------------页面跳转
jump(){
  wx.navigateTo({
    url: '/pages/yuncun/yuncun',
  })

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

},

点击按钮触发方法即可成功跳转

路由跳转api的其他方式

跳转路由传递参数

1.使用标签(路由 传参)传参

api可传如何类型,标签传值只能传字符串类型

1.在wxml文件中

<!--通过标签跳转传值-->
 <navigator url="/pages/cloudfn/cloudfn?id={{title}}&name=小鸭鸭" open-type="redirect">百度一下</navigator>

2.在js文件中的data中补充title的值

 // pages/jump/jump.js

data: {
    title: "6666"
  },

4.在跳转过去的页面中输出接收到的值

// pages/cloudfn/cloudfn.js


  
  onLoad: function (options) {
跳转到该页面后输出接收到的值
  console.log(options);
  },

通过eventChannel 进行通讯

只有navigateTo 能实现

优点 : 可以传递任意类型的数据

0.在jump.wxml文件中写个按钮,用户触发jump()方法

 <button type="submit" bindtap="jump">通过api跳转</button>

1.发送数据

// pages/2jump/2jump.js
Page({


  jump(){
    //navigate  redirect
    // ?传递数据  只能传递  字符串类型  
    // api传递数据  可以传递任意类型
    wx.navigateTo({
      url: '/pages/media/media?aa='+this.data.title,
      success(res){
        //当你跳的时候  带过去一些数据
        //通过 eventChannel.emit
        //res.eventChannel.emit("频道",数据)
        res.eventChannel.emit("tudou",{name:['修昂叫',"苹果",'大鸭梨']})
      }
    })
    

  },

2.在media.js接收数据

  onLoad: function (options) {
    //接频道的数据
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("tudou", (res) => {
      console.log(res);
    })
  },

获取用户信息

<!-- 获取的是当前使用该应用的用户的信息 -->
<!-- 只要在标签里写上相应的type类型即可 -->
获取用户名
<open-data type="userNickName"></open-data>

获取用户头像
<open-data type="userAvatarUrl"></open-data>

获取用户性别
<open-data type="userGender"></open-data>