微信小程序如何访问网络资源

此文以无资源开发框架为例个人开发者-无资源开发（微信小程序）-CSDN博客

一、创建请求页面

创建新页面，在app.json文件里新创建一个页面，在pages里录入 pages/top/top

录入之后点击会在pages文件生成文件夹top,top中含有多个子文件如图所示：

分别写入代码：

wxml文件（类似HTML语言）top.wxml：

<view>

  <button class='bottom'  lang="zh_CN" bind:tap="loginET">

微信授权登录

  </button>

</view>

wxss文件（类似css语言）top.wxss：

.bottom {  

  width: 100px; /* 根据需要调整宽度 */  

  height: 45px; /* 根据需要调整高度，确保宽高相等以实现圆形 */  

  background-color: #f58504fd; /* 设置背景颜色 */  

  color: white; /* 设置字体颜色 */  

  font-size: 18px;

  line-height: 30px; /* 设置行高与高度相等，确保文本垂直居中 */  

  display: block; /* 阻止按钮换行 */  

}  

js文件top.js：

import requestUrl from '../../utils/util.js';

Page({

  data: {

    isAgreed: false ,// 初始未勾选状态 ,

    show:false

  },

 loginET:function(){

    if (this.data.isAgreed){

      try { 

      wx.login({

        success: res => {

            if (res.code) {

                requestUrl.requestUrl({

                    url: "/checkyesornofirstlogin",

                    params: {

                        code: res.code

                    }

                }).then((res) => {

                  const app=getApp()

                  if (res.data.msg=='failed'){

                    wx.showToast({

                      title: '系统访问失败，请稍后再试',

                      icon: 'none', // 图标，成功、加载中、警告、错误  

                      duration: 2500, // 提示的延迟时间，单位毫秒，默认1500  

                      mask: false, // 是否显示透明蒙层，防止触摸穿透  

                      success: function () {  

                        // 接口调用成功的回调函数  

                      },  

                      fail: function (err) {  

                        // 接口调用失败的回调函数  

                        console.error('showToast fail', err)  

                      }  

                            })

                  }

                }).catch((errorMsg) => {

                    console.log(errorMsg)

                })

            }

        }

    })

    }

  }

})

在utils文件里边util.js文件编写以下代码，为了小程序发送请求

//封装请求

const server = 'http://127.0.0.1:3000';（这里我使用的本地服务）

const requestUrl = ({url, params, success, method = "post"}) => {

    wx.showLoading({

        title: '加载中',

    });

    let headerPost = {'content-type': 'application/x-www-form-urlencoded'}

    let headerGet = {'content-Type': 'application/json'}

    return new Promise((resolve, reject) => {

        wx.request({

            url: server + url,

            method: method,

            data: params,

            header: method = 'post' ? headerPost : headerGet,

            success: (res) => {

                wx.hideLoading();

                if (res['statusCode'] == 200) {

                    resolve(res)//异步成功之后执行的函数

                } else {

                    wx.showToast({

                        title: res.data.msg || '请求出错',

                        icon: 'none',

                        duration: 2000,

                        mask: true

                    })

                    reject(res.ErrorMsg);

                }

            },

            fail: (res) => {

                wx.hideLoading();

                wx.showToast({

                    title: res.data.msg || '',

                    icon: 'none',

                    duration: 2000,

                    mask: true

                })

                reject('网络出错');

            },

            complete: function () {

                wx.hideLoading()

            }

        })

    })

}

module.exports = {

    requestUrl: requestUrl

}

页面展示为以下示例

服务端部署号node.js之后，在环境中创建server.js文件

server.js文件内容：

const express = require('express');  
const bodyParser = require('body-parser');  
const app = express();
app.use(bodyParser.json());  
app.use(bodyParser.urlencoded({ extended: true }));

链接数据库

const mysql = require('mysql2/promise');

async function jfcxdatabase() {
    // 创建连接池
  const pool = await mysql.createPool({
  connectionLimit: 100, // 连接池中的最大连接数
  host: 'mysql.sqlpub.com',
  port:3306,
  user: '注册的sqlhub user',
  password: '注册的sqlhub password',
  database: '注册的sqlhub 库名'
    });
   return pool
   }

获取微信的session_key、openid

const axios = require('axios');  
  
async function fetchData(params) {  
  let code = params.code; // 获取小程序传来的code  
  let appid = "微信开发平台注册的appid "; // 替换为你的小程序的appid  
  let secret = "微信开发平台注册的secret "; // 替换为你的小程序的secret  
  let grant_type = "authorization_code"; // 授权（必填）默认值  
  // 请求获取openid和session_key  
  let url = `https://api.weixin.qq.com/sns/jscode2session?grant_type=${grant_type}&appid=${appid}&secret=${secret}&js_code=${code}`;  
    
  try {  
    const response = await axios.get(url);  
    const data = response.data;
    // 检查返回的数据中是否包含openid和session_key  
    if (data.openid && data.session_key) {  
      return { openid: data.openid, session_key: data.session_key };  
    } else {  
      throw new Error('openid or session_key not found in the response');  
    }  
  } catch (error) {  
    console.error('Error fetching data:', error);  
    throw error; // 重新抛出错误，以便调用者可以处理它  
  }  
}  

app.post('/checkyesornofirstlogin', async (req, res) => {
  console.log('checkyesornofirstlogin');
//   假设 getUserInfo.fetchData 返回一个 Promise
  getUserInfo.fetchData(req.body)
    .then(({ openid, session_key }) => {
      return new Promise(async (resolve, reject) => {
       let pool=await db.jfcxdatabase()
       try {
            const [results,type]=await pool.query(`SELECT id FROM passengers WHERE id = ?`, [openid])
            if (results.length > 0) {
             res.json({'msg':'success','yesornofirstlogin':false,'appid':openid});
            } else {
              res.json({'msg':'success','yesornofirstlogin':true,'appid':openid});
            }
}catch(error){
console.log(error)
res.json({'msg':'failed'})
}finally{
await pool.end()
}
});
})
})

app.listen(3000, () => {  
  console.log('server running at http://127.0.0.1:3000');  
})

数据库创建表格www.sqlpub.com注册数据库

点击按钮实现用户是否登录过检测

启动服务在server.js文件夹打开控制台运行。或者使用其他方式打开控制台都可以，但是要保证路径正确输入node server.js。示例如下我是放在我的文件夹下了

启动成功展示，其他情况会报错

此时可以点击按钮测试了，测试结果

结语

以上就是全部内容了，如果想了解更多，请关注我，会回关的偶，谢谢阅读，祝您成功