爬虫成果分享小程序1.0.0版本完成

2020年2月8日

接口虽然写的还比较快,但是小程序没有做过,耗时2天熟悉了组件和架构,做了第一版

微信登录

刚写完接口的我还沾沾自喜,第一个问题接踵而来: 微信登录

这里指的是进入小程序的登录,用户是无感的,也不要授权,和获取用户信息不一样,那个是要用户确认授权的

这里的登录是把用户进入小程序的临时登录状态code 发送到我们服务器上,再用服务器对API进行相应的请求

用code换取openid和 unionid ,openid是在小程序中唯一的,但是相关微信系产品中不一定,例如公众号,unionid 则是微信系平台唯一,也是重要的用户资源

由于一开始不熟悉绕了很多弯路,最后直接贴代码,Django调用微信登录存储openid

# 小程序登陆统一接口
def pc_login(request):
    appid = '输入你小程序的appid '
    secret = '输入你小程序的密钥'
    js_code = request.GET.get('code')
    url = 'https://api.weixin.qq.com/sns/jscode2session' + '?appid=' + appid + '&secret=' + secret + '&js_code=' + js_code + '&grant_type=authorization_code'
    response = json.loads(requests.get(url).content)  # 将json数据包转成字典
    if 'errcode' in response:
        return HttpResponse('error')
    openid = response['openid']
    # 保存openid
    User.objects.get_or_create(openid=openid)
    return HttpResponse(openid)

this?that?

我也是第一次接触小程序,在小程序Page中调用函数会碰到第一个问题

在网络请求之后绑定数据时报错,例如下面这段代码

wx.request({
          url: 'https://www.zlfgame.club/',
          data: {
            number: 5
          },
          success(res) {
            this.setData({ array: res.data })
          }
        })

这段代码主要是利用wx.request发送网络请求,在success的回调中利用this.serData绑定数据

但是报错了,需要修改成这样才行

var that = this
     wx.request({
          url: 'https://www.zlfgame.club/',
          data: {
            number: 5
          },
          success(res) {
            that.setData({ array: res.data })
          }
        })

在函数调用的外面用that代指this,来调用setData就没问题了,这是为什么呢?

这里就是this在小程序中的作用域问题,碰到success回调是个闭包,没有办法直接使用this,这里要相当注意

按钮的样式

微信小程序中自带的样式是比较基础的,默认颜色也只有白色、绿色、红色,我个人比较喜欢自定义按钮,特别是大圆角和渐变的按钮

话不多少直接上代码

.button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background:linear-gradient( rgba(171,220,255,0.3),rgba(3,150,255,0.3));
  border-radius: 98rpx;
  font-size: 10pt;
  text-align: center;
}

基本上实现了渐变和大圆角,小程序对渐变的支持比较方便 利用好类似linear-gradient这样的工具,很轻松就能做出渐变效果来

阴影

我也是阴影爱好者,微信小程序也不例外,就一行,改在wxss里

.item {
  border-radius: 15px;
  box-shadow: 3px 3px 5px 1px rgba(85, 85, 85, 0.10);/*Android*/
  -webkit-box-shadow:3px 3px 5px 1px rgba(85, 85, 85, 0.10);/*IOS*/
  margin: 20px;
  padding: 16px;
  text-align: center;
}

不知道大家注意没有小程序的阴影在安卓和苹果上市不一样的

安卓需要 box-shadow这一行,苹果外加 -webkit-box-shadow这一部分

总结

最后重点问题也解析的差不多了 给大家看看这么一个简单的小程序的样子吧

微信图片_20200208230426.png

微信图片_20200208230431.png

基本功能也实现了 资源从我的后台进行发布,审核,小程序可以下滑刷新我分享出来的资源链接或者代码块

下一步实现小程序发布,还有代码块显示的优化问题


返回文章列表

本文所属标签

技术 小程序 后端