python+flask+爬虫 简单小程序开发（1）

最近简单的入门了微信小程序开发，遂写一篇博客记录下学习过程

首先在自己的公众号找到小程序的入口

里面会有详细的api内容和开发文档介绍
在申请appid后，我们可以选择用自己本来的idea或者微信推荐的微信开发工具进行编码

贴个官方下载链接：戳我
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载安装完成后，主界面是这个样子（如果提示xxx文件写入失败，原因是你c盘空间满了，它安装时会在c盘建立临时文件）

填入你的appid后，即可开始你的第一个小程序开发
简单说明一下微信开发工具需要注意的地方：

1.小程序的框架与html语言结构类似，图中的index.js用来写js文件，wxml类似于html文件，wxss则和style文件类似
2.小程序整体布局与html极度相似，并不需要再去学习
3.小程序的脚本语言并不能作为组件的事件回调

详细介绍请参考官方文档：戳我
https://developers.weixin.qq.com/miniprogram/dev/framework/

简单的代码实例

WXML

<!--index.wxml-->
<view class="container">
  <view class="header">
    <picker bindchange="bindPickerChange" value="{
    
    {index}}" range="{
    
    {array}}">
          <button class="weui-btn" type="default">{
    
    {
    
    array[index]}}</button>
    </picker>
  </view>
  <view class="nav">
    <text>标题1</text>
  </view>
</view>

WXSS

.header{
    
    
  position: absolute;
  top: 0px;
}

JS

//index.js
//获取应用实例
const app = getApp()

Page({
    
    
  data: {
    
    
    array: ['炉石传说', '英雄联盟', 'APEX', '怪物猎人'],
    objectArray: [
      {
    
    id:0,
      name:'炉石传说'
      },
      {
    
    id:1,
      name:'英雄联盟'
      },
      {
    
    id:2,
      name:'APEX'
      },
      {
    
    id:3,
      name:'怪物猎人'}
    ],
    index: 0
},
bindPickerChange: function (e) {
    
    
  
  this.setData({
    
    
    index: e.detail.value
  })
}

})

运行效果：

关于小程序的介绍就先到这，下一篇会讲讲如何用flask部署在服务器上，然后在小程序上拿到数据