微信小程序打开python脚本 微信小程序调用python接口

1.首先讲一下横向滑动功能：

1.1最外层    <view  class="menuview">包裹

使用<scroll-view  class="scroll-view"  scroll-x="true">

里面嵌套view

1.2在最外层的menuview的wxss设置为  display: flex;

在wxss中给sroll-view设置为  white-space: nowrap;

给内层view设置为  display: inline-block;

2.Python服务器的功能

使用fastapi，然后创建app对象，使用@app.get()来调用这些接口，返回一些参数。最后通过uvicorn.run方法来跑服务器，我这里设置的本机地址，端口为8050

3.内网穿透

上一篇的通过nginx访问地址端口设置的是8030，使用的内网穿透工具是natapp。

这次穿透python服务器使用的内网穿透工具是飞鸽，端口设置的是8050

4.使用的时候，首先nginx要打开，其次python服务器要打开，然后穿透8030端口的那个工具要打开，最后穿透8050端口的那个工具也要打开

效果图

app.json

{
  "pages": [
    "pages/first/first",
    "pages/one5/one5",
    "pages/one4/one4",
    "pages/one3/one3",
    "pages/one2/one2",
    "pages/one1/one1",
    "pages/index/index",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 first.js

// pages/first/first.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    //轮播图的数据
    swiperdatas:[],
    color:"",
    menus:[],
    griddatas:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    //python fastapi的服务器IP地址
    wx.request({
      url: '这边换成用来穿透8050的那个飞鸽的地址/loadindex',
      success:(resp)=>
      {
        let  sdatas=resp.data;
         console.log(sdatas);
         console.log(typeof  sdatas);

         this.setData({swiperdatas:sdatas.sdatas,
          color:sdatas.color,menus:sdatas.menus,griddatas:sdatas.griddatas});
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

first.json

{
  "usingComponents": {}
}

first.wxml

<!--pages/first/first.wxml
1.轮播图  可以维护 可以配置
2.横向滚动菜单  可以维护 可以配置
3.垂直滚动菜单 可以维护 可以配置
4.自定义底部菜单栏   可以维护 可以配置
5. 反向推送机制
-->
<view  class="pageview">

    <view  class="topview">
      <swiper  class="swiperview" autoplay="true"  indicator-dots="true" indicator-active-color="{{color}}">
        <block wx:for="{{swiperdatas}}">
              <swiper-item>
                 <view  class="sview">
                    <image  src="{{item}}"  class="cimg"></image>
                 </view>
              </swiper-item>
        </block>
      </swiper>
    </view>

    <view  class="splitview">

    </view>

    <view  class="menuview">
       <scroll-view  class="scroll-view"  scroll-x="true">
           <block  wx:for="{{menus}}">
              <view  class="menuboxview">
                 <view class="innerview">
                    <view  class="topbox">
                     <image  src="{{item.img}}"  class="cimg1"></image>
                      </view>
                      <view  class="bottombox">
                          <view>{{item.text}}</view>
                      </view>
                 </view>
              </view>
           </block>
       </scroll-view>
    </view>
    <view  class="contentview">
             <scroll-view  class="scroll-view1"  scroll-y="true"  enable-flex="true">
                   <block  wx:for="{{griddatas}}">
                       <view  class="cboxview">
                         <view class="leftview">
                             <view  class="imgview">

                               <image  src="{{item.img}}"  class="cimg"></image>
                             </view>
                         </view>
                          <view  class="rightview">
                              <view  class="b1">{{item.text[0]}}</view>
                              <view class="b1">{{item.text[1]+item.text[2]}}</view>
                              <view class="b1">{{item.text[3]}}</view>
                         </view>
                       </view>
                   </block>
             </scroll-view>
    </view>

</view>

first.wxss

/* pages/first/first.wxss */
.pageview{
  width: 100%;
  height: 100vh;
}
.topview{
  width: 100%;
  height: 22%;
  /**border-bottom: 1px  solid  black;**/
}
.swiperview{
  width: 100%;
  height: 100%;
}
.sview{
  width: 100%;
  height: 100%;
}
.cimg{
  width: 100%;
  height: 100%;
}
.splitview{
  width: 100%;
  height: 4px;
  background-color: paleturquoise;
}
.menuview{
  width: 100%;
  height: 18%;
  border-bottom: 2px  solid  paleturquoise;
  display: flex;
  align-items: center;
}
.scroll-view{
  width: 100%;
  height: 80%;
 /** border:1px  solid  black;**/
  white-space: nowrap;
}
.menuboxview{
  width: 30%;
  height: 100%;
 /** border:1px  solid  green;**/
  margin-left:5px ;
  display: inline-block;

}
.innerview{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.topbox{
  width: 100%;
  height: 76%;
 
}
.bottombox{
  width: 80%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 楷体;
  color: silver;
  margin-top: 5px;
}
.cimg1{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.contentview{
  width: 100%;
  height: 60%;


}
.scroll-view1{
  width: 100%;
  height: 100%;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cboxview{
  width: 40%;
  height: 20%;
  border:1px  solid  paleturquoise;
  margin: 10px;
  border-radius: 5px;
  display: flex;

}
.leftview{
  flex: 2.5;
  /**border:1px  solid  black;**/
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px dotted  slategray;

}
.imgview{
  width: 80%;
  height: 80%;
  /**border:1px  solid  palegreen;**/
}
.rightview{
  flex: 1;
  /**border:1px  solid  green;**/
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 楷体;
  color: silver;
}

python.server

#来自于fastapi文件导入FastAPI  类
from fastapi  import  FastAPI
import   uvicorn

#创建FastAPI对象
app=FastAPI()


nginxpath="这边换成穿透8030用的natapp的地址"

@app.get("/")
def  index():
      print("执行index方法")
      return {"msg":"欢迎使用python最快的框架fastapi"}

@app.get("/query")
def  query():
      print("执行query方法")
      lists=["one","two","three"]
      return lists


@app.get("/loadindex")
def  loadIndexView():
      print("执行loadIndexView方法")
      #1.轮播图
      swiperdatas=["这边换成穿透8030用的natapp的地址/img/a1.jpg",
                   "这边换成穿透8030用的natapp的地址/img/a2.jpg",
                   "这边换成穿透8030用的natapp的地址/img/a3.jpg",
                   ]
      #2.轮播图的指示器的颜色
      color="blue"
      #3.水平滚动视图菜单
      menudatas=[{"这边换成穿透8030用的natapp的地址/img/a1.jpg","text":"嘉然1"},
                 {"这边换成穿透8030用的natapp的地址/img/a2.jpg","text":"嘉然2"},
                 {"这边换成穿透8030用的natapp的地址/img/a3.jpg","text":"嘉然3"},
                 {"这边换成穿透8030用的natapp的地址/img/a4.jpg","text":"嘉然4"},
                 {"这边换成穿透8030用的natapp的地址/img/a5.jpg","text":"嘉然5"},
                 {"这边换成穿透8030用的natapp的地址/img/a6.jpg","text":"嘉然6"},
                 {"这边换成穿透8030用的natapp的地址/img/a7.jpg","text":"嘉然7"},
                 {"这边换成穿透8030用的natapp的地址/img/a8.jpg","text":"嘉然8"},
                 {"这边换成穿透8030用的natapp的地址/img/a9.jpg","text":"嘉然9"}]

      #4.垂直滚动的功能视图
      griddatas=[{"这边换成穿透8030用的natapp的地址/img/d0.png","text":"第01个"},
                 {"这边换成穿透8030用的natapp的地址/img/d1.png","text":"第02个"},
                 {"这边换成穿透8030用的natapp的地址/img/d2.png","text":"第03个"},
                 {"这边换成穿透8030用的natapp的地址/img/d3.png","text":"第04个"},
                 {"这边换成穿透8030用的natapp的地址/img/d4.png","text":"第05个"},
                 {"这边换成穿透8030用的natapp的地址/img/d5.png","text":"第06个"},
                 ]
      return  {"sdatas":swiperdatas,"color":color,"menus":menudatas,"griddatas":griddatas}


if __name__=="__main__":
    uvicorn.run(app="server:app",host="0.0.0.0",port=8050)