一个微信小程序的案例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一个微信小程序的案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12215字，纯文字阅读大概需要18分钟。

内容图文

参考https://www.bilibili.com/video/BV1WQ4y1T7D8?p=38&spm_id_from=pageDriver
小程序目录结构
一个微信小程序的案例 - 文章图片

<!--index.wxml-->
<!-- logo，消息框 -->
<view class="header">
  <view class="container hdCon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/image/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 -->
      <image mode="heightFix" src="/image/kefu.png"></image>
    </view>
  </view>
</view>
<!--自定义组件-->
<!-- <xsj></xsj> -->
<!-- 轮播图 -->
<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular autoplay interval="4000">
    <swiper-item>
      <image src="/image/banner1.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner2.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner3.png"></image>
    </swiper-item>
  </swiper>
</view>
<!-- 课程横导航<scroll-view> -->
  <scroll-view class="major" scroll-x>
  <view class="majorCon">
    <navigator class="scroll-nav-items" url="/pages/ps/ps">
      <image class="pic" src="/image/kecheng1.png"></image>
      <view class="txt">平面设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng2.png"></image>
      <view class="txt">web前端</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng3.png"></image>
      <view class="txt">室内设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng4.png"></image>
      <view class="txt">UI设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng5.png"></image>
      <view class="txt">影视后期</view>
    </navigator>
  </view>
</scroll-view>
<!-- 学生作品 -->
<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">学员作品</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="wkMain">
      <navigator class="box" url="">
        <image class="pic" src="/image/xszp1.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp2.png"></image>
        <view class="ceng">
          <view class="tit">web 前端</view>
          <view class="line"></view>
          <view class="des">Web front end work</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp3.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp4.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp5.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp6.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp7.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp8.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
    </view>
  </view>
</view>
<!-- 动态 -->
<view class="dynamic">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">行业动态</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="dyMain">
      <navigator class="dyItem" wx:for="{{dataList}}">
        <view class="pic">
          <image src="/image/xszp8.png"></image>
        </view>
        <view class="txt">
          <view class="title">{{item.title}}</view>
          <view class="info">作者：<text >{{item.author}}</text><text space="ensp"> - </text> 时间：<text>{{item.posttime}}</text></view>
        </view>
      </navigator>
    </view>
  </view>
</view>

<!-- footer -->
<view class="footer">
  <image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度-->
  <view class="text">
    谷歌搜索接收反驳
  </view>
</view>

/**index.wxss**/
/* 学生作品 */
.pubTitle{ /* 公共样式*/
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTitle .txt{
  font-size: 40rpx;
  position: relative;
  padding-left: 20rpx;
}
.pubTitle .txt::before{/* 使用伪元素在元素之前插入内容*/
  display: block;
  width: 8rpx;
  height: 34rpx;
  background: #c8020b;
  content: " ";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15rpx;
}
.pubTitle .more{
  font-size: 34rpx;
  color: #666;
}
/* logo 客服布局*/
.header{
  width: 750rpx;
  height: 90rpx;
}
.hdCon{
  display: flex;
  justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */
  height: 100%;
  align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{
  height: 50rpx;
}
.hdCon image{
  height: 100%;
}
.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}
/* 轮播图*/
.banner{
  width: 100%;
  height: 295rpx;
}
.banner swiper{/* swiper默认高度150px，需要自己手动调整*/
  height: 100%;
  width: 100%;
}
.banner image{
  width: 100%;
  height: 295rpx;
}
/* 专业横排滚动导航*/
.majorCon{
  padding: 20rpx 0;
  display: flex;
  flex-wrap: nowrap;
  width: 1000rpx;
  /* justify-content: space-between; */
}
.major .pic{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.major .scroll-nav-items{
  text-align: center;
  width: 200rpx;
  flex: 1;
}
.major .txt{
  font-size: 26rpx;
  margin-top: 10rpx;
}
/* 学生作品 */
.works{
  background: #f0f3f8;
  padding: 90rpx 0 70rpx;
}
.wkMain{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wkMain .box{
  width: 344rpx;
  height: 214rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.pic{
  width: 100%;
  height: 100%;
}
.wkMain .ceng{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;/* 指定两个并排的带边框的框*/
  text-align: center;
}
.wkMain .ceng .tit{
  font-size: 34rpx;
}
.wkMain .ceng .line{
  width: 50rpx;
  height: 2rpx;
  background: #fff;
  margin: 10rpx 0 20rpx;
}
.wkMain .ceng .des{
  opacity: 0.6; /*透明度*/
  text-transform: uppercase;/* 全大写*/
  font-size: 24rpx;
  letter-spacing: 5rpx;
}
/* 行业动态 */
.dynamic{
  padding: 90rpx 0 70rpx;
}
.dyItem{
  display: flex;
  padding: 15rpx 0;
  border: 1px dashed #f4f4f4;
  justify-content: space-between;
}
.dyItem .pic{
  /* flex: 2;占两份 */
  width: 230rpx;
  height: 150rpx;
}
.dyItem .pic image{
  width: 100%;
  height: 100%;
}
.dyItem .txt{
  width: 440rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dyItem .title{
  font-size: 34rpx;
}
.dyItem .info{
  font-size: 22rpx;
  color: #888;
}
.dyItem .info text{
  font-size: 26rpx;
}
/* footer */
.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}

{
  "usingComponents": {
    "xsj":"/components/xsj/xsj"
  }
}

index.js

// import common from "../../utils/public"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    // 发送网络请求获取真实的行业动变  青年帮站酷 学习干货（数据接口)
    wx.request({
      url: 'https://ku.qingnian8.com/school/list.php',
      data:{
        num:5,
        page:4
      },
      success:res=>{
        res.data.forEach(item=>{/*处理获取到的时间戳 */
          // item.posttime=common.getMyDate(item.posttime,'Y-m-d')
        })
        this.setData({
          dataList:res.data
        })
      }
    })
  },

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

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

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

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

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

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

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

<!--pages/ps/ps.wxml-->
<!-- header -->
<view class="header">
  <view class="container hdCon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/image/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 -->
      <image mode="heightFix" src="/image/kefu.png"></image>
    </view>
  </view>
</view>

<view class="banner">
  <image mode="widthFix" src="/image/ps1.png"></image>
</view>

<view class="psBox" wx:for="{{6}}">
  <view class="psBoxTit">
    专业软件技能
  </view>
  <view class="psBoxCon">
    <image src="/image/ps2.png" mode="widthFix" class="pic"></image>
    <view class="text">
      <view>人像精修</view>
      <view>商业广告片调色</view>
      <view>商业海报级视觉精修</view>
      <view>卡通人物制造</view>
      <view>2.5D插画制作</view>
      <view>3D文字视觉特效制作</view>
      <view>平面广告创意</view>
      <view>合成特效制作</view>
    </view>
  </view>
</view>

<!-- footer -->
<view class="footer">
  <image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度-->
  <view class="text">
    高端实训品牌
  </view>
</view>

/* pages/ps/ps.wxss */
/* logo 客服布局*/
.header{
  width: 750rpx;
  height: 90rpx;
}
.hdCon{
  display: flex;
  justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */
  height: 100%;
  align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{
  height: 50rpx;
}
.hdCon image{
  height: 100%;
}
.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}

/* 海报 */
.banner{
  width: 100%;
}
.banner image{
  width: 750rpx;
  display: block;
}
.psBox{
  padding: 80rpx 0;
  background: #1C356E;
}
.psBox:nth-child(2n){/*子选择器*/
  background: #fff;
}
.psBoxTit{
  width: 490rpx;
  height: 70rpx;
  background: #DE2E05;
  border-radius: 70rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  font-size: 40rpx;
  margin: 0 auto;
  position: relative;
  margin-bottom: 40rpx;
}
.psBoxTit::before{
  display: block;
  content: " ";
  width: 100%;
  height: 100%;
  border: 2px dotted #DE2E05;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 70rpx;
  transform: scale(1.03,1.2);/*向外扩展（水平，垂直）*/ 
}
.psBoxCon .pic{
  width: 100%;
}
.psBoxCon .text{
  padding: 40rpx 26rpx;
 box-sizing: border-box;
 display: flex;
 flex-wrap: wrap;/*换行*/
}
.psBoxCon .text view{
  width: 50%;
  font-size: 30rpx;
  line-height: 1.8em;
  position: relative;
  padding-left: 18rpx;
  box-sizing: border-box;
}
.psBoxCon .text view::before{
  content: "";
  display: block;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5rpx;
}
.psBox:nth-child(2n-1) .psBoxCon .text{
  color: #fff;
}
.psBox:nth-child(2n-1) .text view::before{
  background: #fff;
}

/* footer */
.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}

public.js

var commonlic={
  getStrLen:function(str,len){
    if(str.length>len){
      return str.substr(0,10)+"..."
    }else{
      return str
    }
  },
  getMyDate:function(timestamp,formats){
    // 将时间戳时间格式改成正常格式
    // formasts 格式包括
    // Y-m-d
    // Y-m-d H:i:s
    // Y年m月d日
    // Y年m月d日 H时i分
    formats=formats || 'Y-m-d';
    var zero = function(value){
      if(value < 10){
        return '0' + value;
      }
      return value;
    };
    var timestamp = timestamp*1000;
    var myDate = timestamp ? new Date(timestamp) : new Date();
    var year = myDate.getFullYear();
    var month = zero(myDate.getMonth() + 1);
    var day = zero(myDate.getDate());

    var hour = zero(myDate.getHours());
    var minite = zero(myDate.getMinutes());
    var second = zero(myDate.getSeconds());

    return formats.replace(/Y|m|d|H|i|s/ig,function(matches){
      return({
        Y:year,
        m:month,
        d:day,
        H:hour,
        i:minite,
        s:second
      })[matches];
    });
  }
}

module.exports=commom

后台请求调用需要忽略非法域名
一个微信小程序的案例 - 文章图片

最后是效果图
一个微信小程序的案例 - 文章图片

内容总结

以上是互联网集市为您收集整理的一个微信小程序的案例全部内容，希望文章能够帮你解决一个微信小程序的案例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/598068.html

来源：【匿名】

【上一篇】Shiro源码分析----登录流程【下一篇】关于IE的RegExp.exec的问题

更多 ►

【一个微信小程序的案例】教程文章相关的互联网学习教程文章

微信小程序学习总结(四) 一. 视图容器 1. view 视图容器属性名类型默认值说明hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0hover-start-time Number 50 ...

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题【代码】【图】

一、位置position【定位属性：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】 1.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。 2.relative：【相对于自己本身在流中的位置的偏移】元素框偏移某个距离。元素扔保持其未定位前的形状，它原来所占的空间扔保留。 3.absolute：【相对于父元素 —— 前提是父元素的位置是确定的】...

【微信小程序】自定义导航栏【代码】【图】

大部分情况下我们都是使用微信官方自带的 navigationBar 配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算导航栏高度编写新的导航栏页面引用自定义导航一、隐藏官方导航栏隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。{"path" : "pages/public/login","style": {"navigationBarTitleText": "","...

微信小程序获取当前位置并调用微信内置地图打开【代码】【图】

图示：index.wxml  <button bindtap="map">定位</button> index.js //index.js //获取应用实例 const app = getApp() Page({data: {},map:function(){wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {var latitude = res.latitudevar longitude = res.longitudewx.openLocation({latitude: latitude,longitude: longitude,scale: 28})}})} })解说：1、index.wxml...

微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示（转载）【代码】【图】

一、前言项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次，是基于微信小程序开发而提炼出一个简单方便使用的方法，网页开发中同样可用。这次使用的还是字体，主要是字体这个比较通用，颜色，大小都可以自己定义。当然了，来的最快的其实是用图片代替。二、微信小程序中评分功能实现 1.css文件中引入字体文件。也可以点此下载字体文件 @font-face { font-family: FontAwesome; src: url(h...

[微信小程序]实现一个自定义遮罩层【代码】【图】

正文：先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button> <view class="bg" bindtap=hideview style=display:{{display}}></view> <view class="show" bindtap=hideview style=display:{{display}}>申请成功 <view class=txt>您的密码为:123456</view> </view> .bg {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-colo...

微信小程序之数据传递【代码】【图】

本文主要介绍，页面跳转间的数据传递。传递的数据类型主要有1，基本数据类型；2，对象；3，数组集合；先告诉你，本质上都是string类型传递。但是对于对象和数组集合的传递需要小小的处理一下传递时的数据和接收后的数据。 1，传递基本数据类型 index.js 发送页JSPage({data: {testStr: 字符串str},onl oad: function () {},next: function(e){wx.navigateTo({url: /pages/test/test?str=+this.data.testStr,})} })test.js 接受页J...

【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址【代码】【图】

摘要：微信小程序内获取用户地理位置信息授权，被拒绝后二次获取，获取权限后逆解析得到用户所在省市区等.. 场景：商城类小程序，在首页时需展示附近门店，即用户刚进入小程序时就需要获取到用户位置信息 step1 在小程序中若要获取用户地理位置信息，需得到用户明确授权，且声明用途，所以首先在app.json中配置声明参见（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）"permission":...

2019课设---基于微信小程序的食堂订餐送餐系统设计【构思】（12）【图】

第12 天:(1)完成数据库的改善工作。（2）完善送货员的订单详情部分的时间问题明日计划：（1）根据数据库完善代码（2）根据老师的建议作出改善今日小结：上午主要把数据库重新设计了一下，这样方便查找，减少代码的重复度。另外，学习了时间戳，可以获取当前时间，完善订单信息。下午老师进行小评。emmm,可怜我抓不到重点，好像没有给老师看到送货员和采购员的页面。因为前面的页...

趣味测试类微信小程序【图】

先说说项目需求吧， l 点击【再测一次】，重新开始测试流程，主持人回复第一个题目，流程同上；答完全部题目后，底部不显示【立即开始分析】按钮，而是直接展示结果，且上一次测试内容不清空；如退出再进来，则清空全部历史记录。图片说明： l 图片上面显示微信头像和昵称 l 名称：左右脑人才鉴定，下面显示2019权威测试标记； l 分数、简述文案与详述文案 l 二维码：H5聚合页的二维码 l 二维码文案为：长按识别二维码|快来领取...

【微信小程序企业级开发教程】快递查询实例【代码】

//index.js //获取应用实例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),expressNu:null,expressInfo:null},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onl oad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else ...

微信小程序---------前段调取接口获取数据，并显示在页面需要的位置！【图】

建议刚入坑小程序的朋友，不懂的仔细看看！然后记住，多使用。话不多B说，直接上代码：部分说明： setData()；该方法是小程序特有的，就是一个将数据渲染到页面的方法，建议仔细去看看官方文档了解下（之前折腾了好久！）

开发微信小程序还是H5，两者的区别是什么？

现在如果说到小程序相信大家都不会陌生，经过数据统计现在微信小程序的数量已经达到了百万个的级别，其实不光有微信小程序，其他的app也有小程序，比如百度小程序、抖音小程序和支付宝小程序等，小程序很多app都有，只不过由于微信使用的用户更多，所以微信小程序比较出名，但是现在移动端还有一个产品比较流行，那就是H5，很多客户不懂这两者的区别，今天我们给大家简单的介绍一下。首先来说微信小程序，微信小程序是基于微信上的...

微信小程序端上传照片ssm后台处理【代码】【图】

微信小程序端的效果1：微信端代码（2）wxxml <view class="container-body container-gray" style="display:{{showfootertab==0?'block':'none'}}"><form bindsubmit="evaSubmit"><view class="group"><view class="group-header">问题描述</view><view class="group-body"><textarea name="evaContent" maxlength="500" value="{{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)" bindblur="charChange" /...

微信小程序picker 日期（年/月/日/时/分）选择器【代码】【图】

<view class="df yuding" style="padding:24rpx 0;"><view class="fs26">预计到店</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><input value={{time}} name="dd_time" placeholder=选择时间 class="fs26 changetime"/></picker></view>const date = new Date(); const years = []; const months = [];...

首页 / 更多教程 / 一个微信小程序的案例

一个微信小程序的案例

内容导读

内容图文

内容总结

内容备注

内容手机端

【一个微信小程序的案例】教程文章相关的互联网学习教程文章

微信小程序学习总结(四)【代码】

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题【代码】【图】

【微信小程序】自定义导航栏【代码】【图】

微信小程序获取当前位置并调用微信内置地图打开【代码】【图】

微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示（转载）【代码】【图】

[微信小程序]实现一个自定义遮罩层【代码】【图】

微信小程序之数据传递【代码】【图】

【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址【代码】【图】

2019课设---基于微信小程序的食堂订餐送餐系统设计【构思】（12）【图】

趣味测试类微信小程序【图】

【微信小程序企业级开发教程】快递查询实例【代码】

微信小程序---------前段调取接口获取数据，并显示在页面需要的位置！【图】

开发微信小程序还是H5，两者的区别是什么？

微信小程序端上传照片ssm后台处理【代码】【图】

微信小程序picker 日期（年/月/日/时/分）选择器【代码】【图】

更多教程 - 最新教程

更多教程 - 最热教程