精华内容
下载资源
问答
  • 同学们大家好,我是小伊同学,今天我们来学习微信小程序框架微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码...

    同学们大家好,我是小伊同学,今天我们来学习微信小程序框架。

     

     

      微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处,最直观地来看,网站页面是运行在浏览器中,微信小程序是运行在微信中。此外,微信小程序能够做到与微信紧密相融,使得在一些功能上的开发更为方便。比如获取用户身份,因为微信账号实际上已经标识了用户身份,只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息,使用手机存储等,借助微信这一平台,小程序都能达到近乎原生APP的操作体验。

     

     

      我们要学习微信小程序的开发,首先就要来了解一下一般的前端开发是什么样的。

     

     

      前端的开发一般采用的是 HTML+ CSS + JS 这样的组合,使用了三种开发语言,那么他们都是干什么用的呢?

     

      假设做一个网站或者小程序是建造一间房子,那么html搭建了房子的骨架,通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件,顾名思义,是房子的组成部件。那么在实际的前端中,这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素,有了这些也就有了这个页面的框架。

     

      而CSS是用来对房间进行装修美化的,就像是把墙面涂上不同的颜色,确定好门窗的摆放位置,是一切看起来非常的赏心悦目。在实际的前端中,就是给每个页面元素加上样式,包括大小、颜色、位置、形状等等。通过css,我们的页面才有了漂亮的视觉效果。

     

      js的作用则是让门和窗户动起来,给组件添加需要的动态效果,比如对鼠标点击的响应,动态地改变展示数据等功能。

     

      通过html+css+js这三部分的配合,最终构成了一个完整的前端。那么小程序也是如此,在小程序中,html变为了wxml,css变成了wxss,这是因为在一些语法和用法上,小程序与普通的前端存在一些差别,但是他们每一部分负责的工作和他们之间的关系都没有变化,大家可以类比加以理解。

     

      同时,微信小程序的框架分为两层,分别是视图层逻辑层,框架的视图层由WXML与WXSS编写,由组件来进行展示,负责小程序的外貌;逻辑层又称为AppService,由js编写,负责小程序的行为动作。因此,我们编写的代码主要是三部分:视图层、逻辑层以及他们之间的联系互动,这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层同时接收视图层的事件反馈视图层将逻辑层的数据展示到界面,同时将视图层的事件发送给逻辑层

     

     

      下面我们来看一下小程序的工程目录,在云开发创建的工程中,小程序的前端和后端代码均在一个目录下,即在小程序根目录下有四部分,cloudfunctions为云开发环境下的后端代码,竖线后为云环境的名称,比如这里的test,这部分代码主要由后端程序员编写,miniprogram为前端代码,前端需要编写的代码都放在这个文件夹里面。

     

      此外还会有一个readme自述文件和一个开发工具配置文件,这两个文件均由开发工具自动创建填写,不需要我们关注,有兴趣的同学可以自己探索,下面我们主要关注miniprogram文件夹。

     

     

      在一个小程序前端代码中,也即miniprogram文件夹下,一共有四种类型的文件,分别是:.json、.wxml、.wxss、.js。

    • json文件主要用来配置项目或者页面的属性,称为配置文件,文件内均为json格式的对象。

    • Wxml文件用来描述页面的结构,称为模板文件,代码类似html语言。

    • Wxss文件描述页面的样式,也称为样式文件,代码类似css语言。

    • js文件用来描述页面的逻辑,即处理页面和用户的交互,也称为脚本逻辑文件。这四种是小程序代码中比较核心的文件类型,

     

      此外,还可以在小程序中添加一些图片文件来美化页面,但这并不是必须的,一般来说我们使用的图片主要为.png和.jpg格式。

     

     

     

      小程序前端都放在miniprogram文件夹下,包含一个描述整体程序的app 和多个描述各自页面的page。描述整体的是以app开头的三个文件,分别为项目全局的js(全局数据和动作)、json(全局配置)和wxss(全局样式),三个文件必须放在根目录下,就是文件夹的最外层。

     

      一个pages文件夹,用于存放小程序的页面代码,该文件夹下可以有任意数量的文件夹,每个文件夹表示一个页面,文件夹名称即为页面名称,文件夹下为该页面的全部代码,使用我们刚才说的四个类型的文件来描述这个页面,且四个文件的名称必须要和页面名称相同。

     

     

     

      此外,在miniprogram文件夹下,还可能会有一个utils文件夹,其中放置的js文件用于存放公共的js代码,方便在不同页面调用。云开发环境下没有自动帮我们创建出来,我们的项目也不需要用到,因此在右边的目录下大家找不到。

     

      为了统一管理图片,我们常常手动在目录下添加images文件夹。

     

      最后,sitemap 配置文件,用来配置小程序及其页面是否允许被微信索引。

     

      好了,本小节的内容就是这些,如果大家有什么问题,欢迎在文末留言,我们明天继续哟~

     

     

    想看视频版?

    关注公号“微程序学堂”,我们的视频教程即将上线

     

    如果你自己写了好文章想投稿

    请联系我们

     

    展开全文
  • 微信小程序 云开发版 tabbar demo示例。 使用了云开发模式 集成了iview-webapp UI框架
  • 微信小程序云开发入门实践

    千次阅读 多人点赞 2020-02-20 19:37:57
    一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要暴露相应的接口供微信小程序调用,这种开发模式其一技术架构复杂...

    云开发介绍

    什么是云开发
    2017年微信小程序发布后,一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要暴露相应的接口供微信小程序调用,这种开发模式技术架构复杂,开发调试难度大,适合本身业务比较成熟的专业公司使用。
    之后随着技术的发展,微信推出了云开发的模式,前端还是使用微信的相关组件开发,但是后端通过微信搭建的NodeJS后台,只需要将相应的业务逻辑封装成函数,供前端调用即可,数据库使用MongoDB,可以在线的创建集合、数据库记录,使用起来非常方便。而且因为前后端技术都用微信自建的技术,所以不需要租用第三方服务器,程序可以自动完成部署,上线通过微信官方代码审核后只需要按照使用的流量交费即可,就和手机的卡一样,开通多少钱的月租就会有多少流量。而且前期有个免费流量,一般的应用开通每月100元的月租即可,整体从开发到运维都非常方便。

    如何开通云开发
    先需要访问微信公众号的官方地址:https://mp.weixin.qq.com/,自己注册一个账号
    官网首页
    在主体选择的页面选择小程序
    主体选择
    因为是需要通过邮箱注册的,邮箱也是日后登录的账号,按照要求操作就可以了
    在这里插入图片描述
    每次登录的时候需要注册的时候的管理员的微信号码认证一下,通过后就可以打开小程序的后台管理页面了
    在这里插入图片描述
    日常经常使用的功能是版本管理和用户管理,版本管理是代码提交之后可以设置为体验版本,那么在用户管理的体验人员就可以用手机体验你做的小程序的具体效果。用户管理主要是用来增加体验人员的,当然还可以设置开发人员,总之这两个功能是挺好用的。
    在这里插入图片描述
    环境搭建
    除了后台的日常操作外,像JAVA开发都会有开发工具一样,微信小程序开发也有自己的开发工具,在后台导航栏的文档栏目下边的工具里可以下载安装
    在这里插入图片描述
    在这里插入图片描述
    具体安装就不介绍了,非常简单,按照提示一路下一步就行。
    创建项目
    工具安装完毕后,双击图标,就可以打开了,这里要强调一个知识点就是APPID,这个呢相当于小程序的唯一标识码,日常创建工程的时候都需要填写,怎么找这个ID呢,在后台打开开发栏目:
    在这里插入图片描述
    即可找到。
    安装完毕后双击安装后的图标
    在这里插入图片描述
    在打开的界面点击+号创建项目
    在这里插入图片描述
    选择项目需要新建的目录,录入项目名称,最重要的是填写自己项目的APPID,后端服务选择小程序云开发
    在这里插入图片描述
    点击新建按钮即可创建云开发的项目
    在这里插入图片描述
    界面整体功能比较清晰,分为导航栏,左侧的模拟器,和右边的代码管理器
    在这里插入图片描述
    导航栏的云开发相当于数据库管理的后台入口,点击可以进入管理界面创建集合增加记录,同时可以管理小程序上传的附件。编译器可以清除缓存,选择编译哪个页面。而模拟器的作用是显示程序运行后在手机的效果,代码管理器按照文件夹的形式管理不同业务模块的代码。
    在这里插入图片描述
    在代码管理器里分为两部分,前端代码和后端代码,前端代码都放在miniprogram文件夹下,后端代码都放在cloudfunctions文件夹下。
    本教程为实践教程,后续会以一个实际的小项目来讲解一下如何使用云开发的技术来开发一款小程序。

    需求分析

    项目背景
    项目的发起方是长期从事教育行业的资深从业者,为了满足家长快速的找到适合的老师进行一对一的辅导,有了搭建家教平台的需求,为此提出项目需求。
    家长需求
    首页用于介绍“名师汇➸家教帮帮”小程序的宗旨。具体内容如下,可用一个静态HTML把下面内容编好就行:
    培优名师:可以按照九宫格显示学科的科目,点击科目可以列出该科目下的所有老师,再点击老师名称可以看到教师的详细信息。
    快速请家教,家长可以发布自己的预约信息,填写自己的要求和实际的位置,便于平台匹配合适的老师。
    平台管理的功能
    老师管理的功能:可以维护老师的信息,发布到培优名师栏目。
    预约管理的功能:可以查看最新的预约信息,列表要区分哪些信息被查看过。

    数据库设计

    通过需求分析,总体上设计了三个表,一个是权限表,里边添加管理员的openid这样就可以在手机上区分是管理员还是普通的家长。第二个表设计了教师表,满足家长浏览信息及管理员维护信息的需要。第三个表设计了预约信息表,记录家长提交的预约内容。
    权限表(admin)
    在这里插入图片描述
    教师表(teacher)
    在这里插入图片描述
    预约表(subscribe)
    在这里插入图片描述

    总体架构

    要编制项目在看完需求并完成数据库设计之后,下一步就需要考虑技术架构,前端用什么架构、后端用什么架构,这里我们前端采用的是微信的原生前端框架weui,后端是采用的云函数。好处是全部采用微信的框架去搭建省去了各种技术不融合的麻烦,而且开发效率也比较高。
    weui搭建方法
    登录到微信公众号平台,点击文档栏目
    在这里插入图片描述
    点击扩展能力可以看到weui的组件库
    在这里插入图片描述
    里边介绍的非常详细,初学遇到的问题就是不会安装npm,具体的安装方法是打开开发工具,在miniprogram右键选择在终端打开即可
    在这里插入图片描述
    在终端里依次执行npm init
    在这里插入图片描述
    npm init install
    在这里插入图片描述
    npm install weui-miniprogram
    在这里插入图片描述
    之后在开发工具的详情里勾选使用npm模块
    在这里插入图片描述
    然后在工具栏里选择构建npm
    在这里插入图片描述
    构建成功后多了一个miniprogram_npm目录就代表成功了
    在这里插入图片描述
    构建完毕需要在app.wxss里的第一行增加
    @import ‘miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss’;这样weui就可以正常使用了
    PS:如果提示npm不是内部或外部命令,说明你电脑没有安装nodejs,自己下载最新的版本安装一下就可以。

    首页

    在这里插入图片描述
    首页基本上为展示信息,当初考虑使用微信的richtext组件开发,但是主页的内容老改,每次一调整内容得在js里改半天,后来改成了article组件。

    wxml代码

    <view class="page">
      <view class="page__hd">
        <view class="weui-article">
          <view class="weui-article__h1 h1_center"><text class="bgindent">名师帮帮</text></view>
        </view>
        <view class="weui-article__section">
          <view class="weui-article__h2 title">概述</view>
          <view class="weui-article__section">
            <view class="weui-article__p p_indent">
              <text class="bgindent">“名师帮帮”</text>何老师从事教学工作二十多年,积累了丰富的教学经验和大量的教师资源,同时也感受到家长、学生的需求与资源匮乏之间的矛盾,希望可以借助该平台在学生和老师之间搭建起一座桥梁。
            </view>
          </view>
          <view class="weui-article__h2 title">教师资质</view>
          <view class="weui-article__section">
            <view class="weui-article__p p_indent">
            <text class="bgindent">“名师帮帮”</text>确认的所有老师都是<text class="green">专职的优秀老师</text>(包括一线在职老师和自由老师),均具有丰富的教学经验,<text class="green">验证过辅导成绩证明</text>,分为:
            </view>
            <view class="weui-article__p p_indent">
            1)<text class="green">培优名师</text>:带出过考入清华北大、获得国内国际竞赛大奖或者班级第一名学生的老师。
            </view>
            <view class="weui-article__p p_indent">
             2)<text class="green">补差名师</text>:辅导后孩子单科学习成绩提高三十分以上的老师。
            </view>
          </view>
          <view class="weui-article__h2 title">运行机制</view>
          <view class="weui-article__section">
            <view class="weui-article__p p_indent">
              <text class="bgindent">“名师帮帮”</text>的运行机制如下:
              <view>
              1). 家长提供学生的学习情况,由何老师推荐适合的最佳老师;
              </view>
              <view>
              2). 上课方式可以到家上课,也可双方协商;
              </view>
              <view>
              3). 课费一次一付给上课老师;
              </view>
              <view>
              4). 何老师负责跟踪教学过程,协助家长和学生解决问题。
              </view>
            </view>
          </view>
          <view class="weui-article__h2 title">课费标准</view>
          <view class="weui-article__section">
            <view class="weui-article__p p_indent">
              <text class="bgindent">“名师帮帮”</text>的老师课时(1小时)费用范围为 300~1000元,具体课费根据年级、科目以及上课时间商议而定。
            </view>
          </view>
          <view class="weui-article__h2 title bgindent">联系人:何老师</view>
          <view class="weui-article__section">
            <view class="weui-article__p">
              1) <text class="green">电话</text>:  
              <view>
              (周一至周五10:00-15:00可电话,其余时间请微信)
              </view>
              <view>
              2) <text class="green">微信</text>:
              </view>
            </view>
          
          </view>
        </view>
      </view>
    </view>
    

    wxss

    page {
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding:5px;
      color:#128b68;
    }
    .bg{
      padding-right:10px;
    }
    .h1_center{
      text-align: center;
      
    }
    .bgindent{
      background: linear-gradient(to right,#005343,#60501d,#802e00,#82181c);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .green{
      color:#43853b;
      font-weight:bold;
    }
    .weui-article{
      padding-top:0px;
      padding-bottom:0px;
    }
    .p_indent{
      text-indent: 2em;
    }
    .title{
      border-left: 3px solid #c60;
      padding-left:15px;
      text-shadow: #f7bc9c 1px 0 10px;
    }
    

    导航页

    在这里插入图片描述
    教员速查主要是显示可以开展培训的科目,目前是九个科目,点击某一个科目可以跳转到对应科目的教师列表,这里采用了weui的九宫格布局,在wxml页面里的每个类目绑定类目名称,跳转到列表页的时候传递类目名称

    WXML

    <view class="page">
        <view class="page__hd">
            <view class="page__title"><text class="bgindent">教员速查</text></view>
        </view>
        <view class="page__bd">
            <view class="weui-grids">
                <block wx:for="{{classes}}" wx:key="*this">
                    <navigator url="../teacherlist/teacherlist?name={{item}}&type=0" class="weui-grid" hover-class="weui-grid_active">
                        <image class="weui-grid__icon" src="/images/class-0{{index+1}}.png" />
                        <view wx:if="{{index==0||index==1||index==2||index==6||index==7||index==8}}" class="weui-grid__label blue">{{item}}</view>
                        <view  wx:if="{{index==3||index==4||index==5}}" class="weui-grid__label green">{{item}}</view>
                    </navigator>
                </block>
            </view>
        </view>
    </view>
    

    WXSS

    page{
      background: #ffffff;
    }
    .title{
      padding:20px;
      color:#F8AD00
    }
    .item{
      width:100px;
      text-align: center;
      margin-top:25px;
    }
    .wrap{
      flex-wrap:wrap
    }
    .bgindent{
      background: linear-gradient(to right,#005343,#60501d,#802e00,#82181c);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .green{
      color:#43853b;
      font-weight:bold;
    }
    .blue{
      color:#128b68;
      font-weight:bold;
    }
    

    js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        classes: ['语文', '数学', '英语', '历史', '地理', '政治', '化学', '物理','生物']
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    教师列表页

    在这里插入图片描述
    教师列表页需要从数据库中查询符合条件的教师显示到页面中,点击教师的姓名可以跳转到详情页中

    wxml

    <view class="page">
      <view class="page__bd">
        <view class="weui-panel weui-panel_access">
          <view class="weui-panel__hd"><text class="bgindent">名师汇</text></view>
          <view class="weui-panel__bd">
            <view class="weui-media-box weui-media-box_text" wx:for="{{teacherlist}}">
              <navigator url="../teacherdetail/teacherdetail?id={{item._id}}">
                <view class="weui-media-box__title weui-media-box__title_in-text"><text class="blue">{{item.name}}</text> <text class="blue margin25">编号:</text><text class="green">{{item.no}}</text></view>
                <view class="weui-media-box__desc"><text class="blue">科目:</text> <text class="green">{{item.course}}</text> <text class="blue margin20">性别:</text><text class="green">{{item.sex}} </text><text class="blue margin20">教龄:</text><text class="green">{{item.year}}</text></view>
              </navigator>
            </view>
            <view wx:if="{{teacherlist.length==0}}" style="text-align:center;line-height:20px;font-size:16px;padding-top:25px;padding-bottom:25px">
         <text class="blue">该类别下暂无教师</text>
      </view>
          </view>
        </view>
      </view>
    </view>
    

    wxss

    .margin20{
      margin-left: 20px;
    }
    .margin25{
      margin-left: 27px;
    }
    

    js

    // miniprogram/pages/teacherlist/teacherlist.js
    wx.cloud.init()
    const db = wx.cloud.database()
    const teacherCollection = db.collection('teacher')
    const _ = db.command
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        teacherlist:[],
        type:""
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options.name+" "+options.type)
        console.log(teacherCollection)
        teacherCollection.where({
          course:options.name,
        }).get().then(res => {
            console.log(res.data)
          this.setData({
            teacherlist: res.data,
            type:options.type
          })
          })
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    教师详情页

    在这里插入图片描述
    详情页比较简单,接收页面传入的ID参数,然后去数据库获取该教师的信息展示到页面中即可

    wxml

    <view class="page">
        <view class="page__bd">
    <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">姓名</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.name}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">编号</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.no}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">科目</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.course}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">性别</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.sex}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">教龄(年)</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.year}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">可辅导年级</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.grade}}</text></view>
                </view>
                <view class="weui-cell flex">
                    <view class="weui-cell__bd left" style="width:100%"><text class="blue">过往辅导成绩</text></view>
                    <view class="weui-cell__ft left" style="width:100%"><text class="green">{{teacher.score}}</text></view>
                </view>
                <view class="weui-cell">
                    <view class="weui-cell__bd"><text class="blue">课时费</text></view>
                    <view class="weui-cell__ft"><text class="green">{{teacher.cost}}</text></view>
                </view>
            </view>
    
        </view>
    </view>
    

    wxss

    .flex{
      flex-direction: column;
      
    }
    .left{
    text-align: left;
    }
    

    js

    wx.cloud.init()
    const db = wx.cloud.database()
    const teacherCollection = db.collection('teacher')
    const _ = db.command
    Page({
    
      /**
       * 页面的初始数据
       */
      data: { 
        teacher:[]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options.id)
         teacherCollection.doc(options.id).get({
          success: res => {
            console.log(res.data)
            this.setData({
              teacher:res.data
            })
          }
         })
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      getUserInfo: function (result) {
        console.log("111")
        wx.redirectTo({
          url: '../order/order',
        })
      }
    })
    

    我的页面

    在这里插入图片描述
    我的页面相对复杂一些,因为第一步需要解决的是登录的问题,微信通过button组件增加属性支持点击按钮之后进行登录,获取到登录信息的时候需要获取该用户是否是管理员,如果不是则下边的菜单看不到教师管理和预约管理的功能,如果是管理员就可以维护教师和处理预约的信息,当然了实现这些功能肯定是需要写云函数的,因为只是小程序端的代码是无法完成的。

    wxml

    <view class="container">
      <view class="page-body">
        <view class="page-section">
          <view class="page-section-spacing">
            <view style="flex-direction:row;width:100%;">
            <block wx:if="{{userInfo.nickName}}">
            <view class="flex-item"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>{{Object.keys(userInfo).length}}</view>
              <view style="text-align:center;margin-bottom:5px">{{userInfo.nickName}}</view>
              </block>
        <block wx:else>
        <view class="flex-item"><image class="userinfo-avatar" src="../../images/user-unlogin.png" background-size="cover"></image></view>
              <view style="text-align:center;margin-bottom:5px"><button open-type="getUserInfo" lang="zh_CN" size="mini" type="primary" bindgetuserinfo="onGotUserInfo">登录{{Object.keys(userInfo).length}}</button></view>
        </block>
              <mp-cells title="">
                <mp-cell link url="../orderlist/orderlist" hover value="我的预约" footer="" ext-class="green">
                    <image slot="title" src="../../images/dingdan.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
                </mp-cell>
                <mp-cell link url="../order/order" hover value="快速预约" footer="" ext-class="green">
                    <image slot="title" src="../../images/yuyue.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
                </mp-cell>
                <mp-cell wx:if="{{userInfo.isadmin==1}}" link url="../teachermanage/teachermanage" hover value="教师管理" footer="" ext-class="blue">
                    <image slot="title" src="../../images/jiaoshiguanli.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
                </mp-cell>
                <mp-cell wx:if="{{userInfo.isadmin==1}}" link url="../ordermanage/ordermanage" hover value="预约管理" footer="" ext-class="blue">
                    <image slot="title" src="../../images/jiazhang.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
                </mp-cell>
            </mp-cells>
            </view>
          </view>
        </view>
      </view>
    </view>
    

    wxss

    .container{
      background: #ffffff;
      width:100%;
      
    }
    .page-body{
      width:100%;
    }
    .flex-item{
      text-align: center;
      width:325px;
    }
    

    js

    // miniprogram/pages/my/my.js
    const db = wx.cloud.database()
    const admin = db.collection('admin')
    const app = getApp();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userInfo:{}
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
      
        const userInfo = app.globalData.userInfo
        if (userInfo) {
        admin.where({
          openid:userInfo.openid
        }).count().then(res => {
          userInfo.isadmin = res.total
          
            this.setData({
              userInfo: userInfo
            })
         
        })
          .catch(err => {
            console.error(err)
          })
      }
        
       
        /*wx.getSetting({
          success: res => {
            console.log("-----" + res.authSetting['scope.userInfo'])
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              console.log("已授权" + res.authSetting['scope.userInfo'])
              wx.getUserInfo({
                success: res => {
                  this.setData({
                    avatarUrl: res.userInfo.avatarUrl,
                    userInfo: res.userInfo
                  })
                  console.log(Object.keys(this.data.userInfo).length)
                }
              })
            }
          }
        })*/
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        const userInfo = app.globalData.userInfo
        if (userInfo) {
        admin.where({
          openid: userInfo.openid
        }).count().then(res => {
            userInfo.isadmin = res.total
            this.setData({
              userInfo: userInfo
            })
          
        })
          .catch(err => {
            console.error(err)
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        const userInfo = app.globalData.userInfo
        if (userInfo) {
          admin.where({
            openid: userInfo.openid
          }).count().then(res => {
            userInfo.isadmin = res.total
            this.setData({
              userInfo: userInfo
            })
    
          })
            .catch(err => {
              console.error(err)
            })
        }
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      onGotUserInfo: function (result) {
        wx.cloud.callFunction({
          name: 'login',
          success: res => {
            console.log(res.result.dbResult.total)
            result.detail.userInfo.openid = res.result.OPENID
            result.detail.userInfo.isadmin = res.result.dbResult.total
            app.globalData.userInfo = result.detail.userInfo
            this.setData({
              userInfo: result.detail.userInfo
            })
            wx.setStorageSync("userInfo", result.detail.userInfo)
          }
        })
      }
    })
    

    在这里插入图片描述
    预约列表页面主要从数据库查询记录,当预约信息查看后同时更新状态,将状态变更为已读

    wxml

    <view class="page">
        <view class="page__bd">
            <mp-cells ext-class="my-cells" title="预约列表">
            <block wx:for="{{subscribe}}">
            <navigator url="../orderdetail/orderdetail?id={{item._id}}&flag=1">
                 <block wx:if="{{item.status=='0'}}">
                    <mp-cell ext-class="blue" value="预约科目:{{item.class}}[未读]" footer="{{item.createtime}}"></mp-cell>
                  </block>
                  <block wx:if="{{item.status=='1'}}">
                     <mp-cell ext-class="green" wx:if="{{item.status==='1'}}" value="预约科目:{{item.class}}[已读]" footer="{{item.createtime}}"></mp-cell>
                    </block>
                  
                    </navigator>
              </block>
            </mp-cells>
        </view>
    </view>
    

    json

    {
      "usingComponents": {
        "mp-cells": "../components/cells/cells",
        "mp-cell": "../components/cell/cell",
        "mp-slideview": "../components/slideview/slideview"
      }
    }
    

    wxss

    /* miniprogram/pages/ordermanage/ordermanage.wxss */
    .weui-cell__ft{
    color:#43853b!important;
    } 
    .weui-cells__title{
      color:#43853b;
    }
    

    js

    wx.cloud.init()
    const db = wx.cloud.database()
    const subscribeCollection = db.collection('subscribe')
    const _ = db.command
    const app = getApp();
    Page({
      data: {
        subcribe: {}
      },
      onLoad: function () {
        
        subscribeCollection.orderBy('createtime', 'desc').get().then(res => {
          for (var index in res.data) {
            var time = res.data[index].createtime;
            console.log(time)
            res.data[index].createtime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
          }
    
          this.setData({
            subscribe: res.data,
          })
        })
        this.setData({
          slideButtons: [{
            type: 'warn',
            text: '删除',
            extClass: 'test',
            src: '/page/weui/cell/icon_del.svg', // icon的路径
          }],
        });
      },
      onShow(){
        subscribeCollection.orderBy('createtime', 'desc').get().then(res => {
          for (var index in res.data) {
            var time = res.data[index].createtime;
            console.log(time)
            res.data[index].createtime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
          }
    
          this.setData({
            subscribe: res.data,
          })
        })
      },
      slideButtonTap(e) {
        console.log('slide button tap', e.detail)
      }
    });
    

    在这里插入图片描述
    预约新增页面使用了weui的扩展组件,主要使用了表单,可以很方便的进行校验

    wxml

    <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
    <view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
        <view class="page__bd">
            <mp-form id="form" rules="{{rules}}" models="{{formData}}">
                <mp-cells class="green" title="快速预约家教">
                    <mp-cell prop="class" title="辅导科目" ext-class="blue">
                        <input bindinput="formInputChange" data-field="class" placeholder-class="green" class="weui-input green" placeholder="请输入辅导科目"/>
                    </mp-cell>
                    <mp-cell prop="grade" title="辅导年级" ext-class="blue">
                        <input bindinput="formInputChange" data-field="grade" placeholder-class="green" class="weui-input green" placeholder="请输入辅导年级"/>
                    </mp-cell>
                    <mp-cell prop="contactname" title="联系人姓名" ext-class="blue">
                        <input bindinput="formInputChange" data-field="contactname" placeholder-class="green" class="weui-input green" placeholder="请输入联系人姓名"/>
                    </mp-cell>
                    <mp-cell prop="telphone" title="手机号" ext-class="blue">
                        <input placeholder-class="green" bindinput="formInputChange" data-field="telphone" class="weui-input green" placeholder="请输入手机号"/>
                    </mp-cell>
                    <mp-cell  title="微信号" ext-class="blue">
                        <input placeholder-class="green" bindinput="formInputChange" data-field="microno" class="weui-input green" placeholder="请输入微信号"/>
                    </mp-cell>
                </mp-cells>
                <view class="weui-cells__title blue">地址</view>
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell">
                    <view class="weui-cell__bd">
                        <input placeholder-class="green" class="weui-input green" bindinput="formInputChange" placeholder="填写辅导的详细地址" data-field="address"/>
                    </view>
                </view>
            </view>
    
            <view class="weui-cells__title blue">要求</view>
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell">
                    <view class="weui-cell__bd">
                        <textarea placeholder-class="green" data-field="demand" bindinput="formInputChange" class="weui-textarea green"  placeholder="填写您对辅导老师的具体要求" style="height: 3.3em" />
                    </view>
                </view>
            </view>
            <view class="weui-btn-area">
                <button class="weui-btn" type="primary" bindtap="submitForm">提交</button>
            </view>
            </mp-form>
            
        </view>
    </view>
    

    wxss

    /* miniprogram/pages/order/order.wxss */
    .weui-cells__title{
       color:#43853b;
    }
    

    js

    wx.cloud.init()
    const db = wx.cloud.database()
    const orderCollection = db.collection('subscribe')
    const _ = db.command
    Component({
      data: {
        showTopTips: false,
        formData: {
        },
        rules: [{
          name: 'class',
          rules: { required: true, message: '辅导科目是必选项' },
        }, {
            name: 'grade',
            rules: { required: true, message: '辅导年级是必选项' },
          }, {
            name: 'contactname',
            rules: { required: true, message: '联系人姓名是必选项' },
          }, {
            name: 'telphone',
            rules: [{ required: true, message: '手机号必填' }, { mobile: true, message: '手机号格式不对' }],
          }, {
            name: 'microno',
            rules: { required: true, message: '微信号是必选项' },
          }]
      },
      methods: {
        formInputChange(e) {
          const { field } = e.currentTarget.dataset
          this.setData({
            [`formData.${field}`]: e.detail.value
          })
        },
        submitForm() {
          this.selectComponent('#form').validate((valid, errors) => {
            console.log('valid', valid, errors)
            if (!valid) {
              const firstError = Object.keys(errors)
              if (firstError.length) {
                this.setData({
                  error: errors[firstError[0]].message
                })
    
              }
            } else {
              console.log(this.data.formData)
              var address ="";
              var demand = ""; 
                if(this.data.formData.hasOwnProperty('address')){
                address = this.data.formData.address;
                console.log(address)
              }
              if (this.data.formData.hasOwnProperty('demand')){
                demand = this.data.formData.demand;
              }
              orderCollection.add({
                // data 字段表示需新增的 JSON 数据
                data:{
                  class:this.data.formData.class,
                  grade:this.data.formData.grade,
                  contactname:this.data.formData.contactname,
                  telphone:this.data.formData.telphone,
                  microno:this.data.formData.microno,
                  address:address,
                  demand:demand,
                  createtime: new Date(),
                  status:0
                }
              })
                .then(res => {
                  console.log(res)
                  wx.showToast({
                    title: '预约成功',
                    icon: 'success',
                    duration: 2000
                  })
                  wx.switchTab({
                    url: '../my/my',
                  })
                })
                .catch(console.error)
            }
          })
        }
    
      }
    });
    

    json

    {
      "usingComponents": {
        "mp-toptips": "../components/toptips/toptips",
        "mp-cells": "../components/cells/cells",
        "mp-cell": "../components/cell/cell",
        "mp-checkbox": "../components/checkbox/checkbox",
        "mp-checkbox-group": "../components/checkbox-group/checkbox-group",
        "mp-form": "../components/form/form"
      }
    }
    

    课程总结

    本次课程通过一个实际的案例演示了如何使用微信云开发的技术去开发一款小程序,总体上微信小程序云开发非常的快,很容易上手,而且不用部署服务器节约了非常多的时间,最主要的特别适合个人开发,一个人就可以满足日常商业中常见的需求,实现中小微企业业务的快速上云,快快实验一下吧。
    项目源码
    https://gitee.com/tuodagitee/famous-teacher-help.git
    线上地址请在微信小程序搜索名师帮帮查看最终效果

    展开全文
  • #微信小程序云开发 该小程序采用vant weapp框架,前端美化,同时具有失物招领、二手市场、表白墙、朋友圈、校内兼职等模块。 十分便于微信小程序云开发新手的实战用。

    #微信小程序云开发
    该小程序采用vant weapp框架,前端美化,同时具有失物招领、二手市场、表白墙、朋友圈、校内兼职等模块。
    十分便于微信小程序云开发新手的实战用。
    首页
    在这里插入图片描述

    展开全文
  • 几款微信小程序快速开发框架

    万次阅读 多人点赞 2018-12-02 14:58:14
    简介:微信小程序是一种全新的连接用户与服务的方式。那么怎样才能快速开发一个小程序呢?下面小编为大家介绍几款小程序快速开发框架。WePY腾讯官方开源的小程序组件化开发框架,目前有1.4w+Star ,一直在更新着,...

    简介:微信小程序是一种全新的连接用户与服务的方式。那么怎样才能快速开发一个小程序呢?下面小编为大家介绍几款小程序快速开发框架。WePY腾讯官方开源的小程序组件化开发框架,目前有1.4w+Star ,一直在更新着,社区活跃 ...

    微信小程序是一种全新的连接用户与服务的方式。那么怎样才能快速开发一个小程序呢?下面小编为大家介绍几款小程序快速开发框架。
     

    几款微信小程序快速开发框架

     

    WePY


    腾讯官方开源的小程序组件化开发框架,目前有1.4w+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来。

    特性
    • 类Vue开发风格
    • 支持自定义组件开发
    • 支持引入NPM包
    • 支持Promise
    • 支持ES2015+特性,如Async Functions
    • 支持多种编译器,Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
    • 支持多种插件处理,文件压缩,图片压缩,内容替换等
    • 支持 Sourcemap,ESLint等
    • 小程序细节优化,如请求列队,事件优化等

    wepy开发资源汇总

    GitHubaben1188/awesome-wepy

    里面有大量的开源项目,开源组件,相关工具,相关文章。同学们不用重复造轮子了,有需要的直接用,加快开发速度~
     

    几款微信小程序快速开发框架

     

    MpVue


    美团出品,使用 Vue.js 开发小程序,从底层支持 Vue.js 语法和构建,目前有1.3w+Star 。框架基于 Vue.js 核心,熟悉Vue的同学可以快速上手。

    美团火车票12306抢票、美团汽车票 和 美团充电都是mpvue开发的。

    特性
    • 彻底的组件化开发能力:提高代码复用性
    • 完整的 Vue.js 开发体验
    • 方便的 Vuex 数据管理方案:方便构建复杂应用
    • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
    • 支持使用 npm 外部依赖
    • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
    • H5 代码转换编译成小程序目标代码的能力

    小编有几个项目都使用了这个框架,还开源了一个,送上GitHub地址“SmallRuralDog/cloud-doc-v2
     

    几款微信小程序快速开发框架

     

    Taro


    京东出品,使用 React 语法规范来开发小程序,目前 9k+Star 

    它不仅可以开发小程序,还可以开发H5、React Native的端,一套代码,打包成不同的客户端,要不要这么强!!

    特性
    • 支持使用 npm/yarn 安装管理第三方依赖。
    • 支持使用 ES7/ES8 甚至更加新的 ES 规范,一切都可自行配置。
    • 支持使用 CSS 预编译器,例如 Sass 等。
    • 支持使用 Redux 进行状态管理。
    • 小程序 API 优化,异步 API Promise 化等等。
     

    几款微信小程序快速开发框架


    有大厂造轮子,是我们开发者的福音,利用框架能快速的开发产品。

    你觉得是原生语法开发小程序好呢,还是集成框架好呢。或者还有其他想了解的~

    原文:https://www.seoxiehui.cn/article-66492-1.html
    展开全文
  • 微信小程序常用开发框架有哪些?

    万次阅读 多人点赞 2019-06-19 09:37:09
    想要开发出一套高质量的小程序,运用框架,组件库...官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。小程序开发中最常...
  • 此包是基于微信小程序开发,因为其它的比如百度、支付宝、今日头条都可以直接转换微信小程序。所以基于微信小程序开发。 调用三步走 一、在wxml中引入模板 <import src="/lskzj/msgbox.wxml"/> <t...
  • 同学们大家好,我是小伊同学,今天我们继续来学习微信小程序云开发教程。今天主要给大家讲解一下json配置部分的知识。 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。 ...
  • 找到如下页面中的AppID(小程序ID),把右边的AppID(小程序ID)复制到我们第1步创建窗口中的AppID位置点击绿色按钮“新建”即可创建成功(切记不要选择小程序·云开发,应该选择不使用云服务) 3.查看小程序自动新建的...
  • 微信小程序开发框架选择

    千次阅读 2018-11-27 07:10:00
    接触微信小程序有较长时间了,一直都是基于微信原生控件进行开发,最开始一些简单的项目没感觉到什么不适,但随着深入,慢慢的发现了一些不足...微信小程序开发.jpg 下面是最近了解的,开发者使用较多的框架: 1. ...
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2018-07-13 22:19:46
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 微信小程序云开发实现增删改查(增) 微信小程序云开发实现增删改查(删) 微信小程序云开发实现增删改查(改) 微信小程序云开发实现增删改查(查) 之前我们已经实现了增删改查的增删改操作,这次我们实现最后一个查询操作...
  • 我用了一个月时间用云开发写了一个带后台的电商小程序,主要功能有发布商品,服务预约,微信支付,商品购买,登录注册等,可以自己在设计功能,我的框架很好。后台可以管理订单,上架,下架商品,修改商品等等。...
  • 适合微信公众平台的前端框架,微信小程序微信服务号开发微信公众平台开发前端开发框架
  • 目录 小程序开发与传统开发模式区别? 小程序传统开发模式 小程序开发模式 区别对比 ...2019前端热词Serverless ...微信小程序开发已经成为目前最火爆的技能之一,无论是在求职、毕设、兴趣...
  • 一、视频版 微信小程序云开发视频教程上线啦 二、图文版 预备知识 1.微信小程序云开发教程-墨刀原型工具入门 2. 原型设计
  • 微信小程序云开发中的数据库

    千次阅读 2020-05-02 16:08:18
    一、数据库的说明 提供增删改查能力的mongoDB数据库 , 是一个非关系型数据库, 是以文档对象存在的 数据库 >> 集合(数组) >> 文档(对象) 二、可视化操作数据库 创建两个集合 添加两条记录 name ...
  • 微信小程序商城 商城框架的制作 讲解商城小程序首页模块的制作,包含商城框架的制作、顶部普通广告图片、顶部轮播广告、快捷菜单、最新通知、最新产品、精品推荐等元素的制作,最后介绍销售排行的制作。本章主要应用...
  • 微信小程序云开发体会——总结软件工程导论大作业前言第一次接触具体难题好用的技术开发完之后的体会无法不热爱更多 前言 可能大家完成这次作业都会选择比较擅长的领域——网页前后端。这的确是比较稳妥的选择,高效...
  • 小程序的开发和之前常见的H5WEB开发有很大的相似性,因此,熟悉H5WEB开发的开发者对小程序开发应该更容易上手,微信小程序框架是基于MVVM模式打造的,微信团队为小程序提供的框架命名为“MINA应用框架”。...
  • 但是我查看了微信小程序的官方文档,发现有一个云开发功能,其中有数据库、存储、函数三种功能。类似于Serverless,我们不需要去买服务器和域名了,直接使用小程序的云开发功能就能做很多事情。我就想试试能不...
  • 文章目录介绍开始—原生小程序云开发开始—`taro`小程序开始云开发实战:用户登录和信息存储(增改查)建立集合函数-登录函数-更新用户信息小程序内调用函数调试准备上线TODO 介绍 taro是京东凹凸实验室团队...
  • 微信小程序云开发的踩坑与填坑篇

    千次阅读 2020-02-22 22:06:52
    这篇文章主要是总结云开发中踩过的坑,优化了往期项目中的一些做法。 顺便总结一下私信/邮件中比较高频的问题。 先总结往期中的一些做法优化 其一、帖子的获取方式 一个帖子,获取的时候分为两个部分,如下图所示: ...
  • 小程序的app.js中输入如下代码:(引号里面就是刚才的环境ID,为了不出错建议复制粘贴) 在project.config.json中输入如下代码:(引号中的名字随便取,等下要用于创建函数的文件夹) 在顶级路径创建文件夹:...
  • 微信小程序模块化开发框架

    千次阅读 2017-05-25 14:39:04
    微信小程序组件化开发框架教程
  • 为了更好的,更简单有效的方式让用户体验到APP的服务,我们就需要好好了解...微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配置 无 JSON 二、基本项目目录 打开vs,可看到对应...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。框架提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视...
  • 首先强调一下,云开发中必须安装 wx-server-...微信为了简化云开发操作,提供了一键云端安装 wx-server-sdk 依赖,也就是在云端帮助我们搞定,不需要我们手动在本地使用 npm 安装,如下图: 如果某个自建的函数需...
  • 基于微信小程序的培训机构系统 前言:该系统作为本科毕业设计,可能还有很多的不足。只是当时做这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,406
精华内容 26,162
关键字:

微信小程序云开发框架

微信小程序 订阅