WEBAPI MINI 后端（微信小程序无师自通二）

这是我们最后的结果，把电脑中SQLite数据库里的数据，显示在自己的微信小程序上：

 关于C# WEBAPI的开发，详情请看上一篇文章，我们的数据源头是电脑上SQLite单文件数据库中的一张数据表：

这里是C# webapi程序的实现关键代码，只有几行：

  webapi程序启动后，作为一个应用程序运行，它工作在http 8090端口。

 安装一个临时域名端口转发工具Cpolar，它可以把webapi的端口发布到公网上，它还能把HTTP的8090转成HTTPS，因为微信需要访问的是HTTPS地址：

 这样我们就已经把SQLite数据发布出来了，可以用浏览器试试看是否可以正常访问。OK，没有问题，我们看到了数据： 

做微信小程序的开发，在新建的演示程序中，修改index.ts代码，在小程序中的语法还真是很怪异，不过我还是成功了：

// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
Page({
  data: 
  {    
    list1: [],
    motto: '123',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs',
    })
  },

  onLoad() 
  {       
    let that = this   
  wx.request
  ({    
    url: 'https://2907b952.r3.cpolar.cn/aaa/3',    
    header:   { 'content-type': 'application/json' },
    success: function (res:any) { console.log(res.data ),that.setData({ list1: res.data  })  } // 将获取到的JSON数据存入list数组中
  })
    // @ts-ignore
    if (wx.getUserProfile) 
    {
      this.setData({
        canIUseGetUserProfile: true      
      })
    }
  },
  getUserProfile() {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e: any) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true    
    })
  }

})

index.wxml文件的代码：

 在微信小程序真机调试中，遇到了取不到数据的问题这样解决：

1、需要在微信的开发平台把自己的域名配置一下：

 2、打开手机和小程序开发模式：

A、打开手机的开发者模式：

打开方式： 手机设置—> 关于手机—->版本信息—-> 版本号 —> 一阵猛点击（这里是我自己的OPPO手机的发开方法，大家各自按照自己的手机去打开）打开后重新打开小程序预览就可以正常的获取到数据了。

B、小程序里面打开开发者模式：