微信小程序_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - CSDN
微信小程序 订阅
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。 [1]  2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。2018年2月,微信官方发布公告称:已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个微信小程序,进行永久封禁处理。2019年8月9日,微信向开发者发布新能力公测与更新公告,微信PC版新版本中,支持打开聊天中分享的微信小程序。 [2] 展开全文
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。 [1]  2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。2018年2月,微信官方发布公告称:已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个微信小程序,进行永久封禁处理。2019年8月9日,微信向开发者发布新能力公测与更新公告,微信PC版新版本中,支持打开聊天中分享的微信小程序。 [2]
信息
外文名
Mini Program
发布时间
2017年1月9日
汉语拼音
wei xin xiao cheng xu
开发商
微信公众平台
中文名
微信小程序
内测时间
2016年9月21日
属    性
应用平台
微信小程序发展历程
2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」。2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供微信小程序在云端服务器的技术方案。2017年1月9日0点,万众瞩目的微信第一批微信小程序正式低调上线,用户可以体验到各种各样微信小程序提供的服务。 [3]  2017年12月28日,微信更新的 6.6.1 版本开放了小游戏,微信启动页面还重点推荐了小游戏「跳一跳」,你可以通过「微信小程序」找到已经玩过的小游戏。 [4]  2018年1月18日,微信提供了电子化的侵权投诉渠道,用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。 [5]  2018年1月25日,微信团队在“微信公众平台”发布公告称,“从移动应用分享至微信的小程序页面,用户访问时支持打开来源应用。同时,为提升用户使用体验,开发者可以设置小程序菜单的颜色风格,并根据业务需求,对小程序菜单外的标题栏区域进行自定义。 [6]  2018年3月,微信正式宣布微信小程序广告组件启动内测,内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力,开发者可以通过微信小程序来赚取广告收入。 [7]  除了公众号文中、朋友圈广告以及公众号底部的广告位都支持微信小程序落地页投放广告,微信小程序广告位也可以直达小程序。 [7]  2018年7月13日,微信小程序任务栏功能升级,新增“我的微信小程序”板块;而微信小程序原有的“星标”功能升级,可以将喜欢的小程序直接添加到“我的微信小程序”。 [8]  2018年8月10日,微信宣布,微信小程序后台数据分析及插件功能升级,开发者可查看已添加「我的微信小程序」的用户数。此外,2018年8月1日至12月31日期间,微信小程序(含小游戏)流量主的广告收入分成比例优化上调,单日广告流水10-100万区间的部分,开发者可获得的分成由原来流水的30%上调到50%,优质微信小程序流量主可获得更高收益。 [9]  2018年9月28日,微信“功能直达”正式开放,商家与用户的距离可以更“近”一步:用户微信搜一搜功能词,搜索页面将呈现相关服务的微信小程序,点击搜索结果,可直达微信小程序相关服务页面。 [10]  2019年8月9日,微信向开发者发布新能力公测与更新公告,微信 PC 版新版本中,支持打开聊天中分享的微信小程序。安装最新PC端测试版微信后,点击聊天中的微信小程序,便会弹出微信小程序浮窗。而在微信小程序右上角的操作选项中,可以进行“最小化”操作,让微信小程序像其他PC软件一样最小化,排列于Windows系统的任务栏中。 [2] 
收起全文
  • 微信小程序开发全案精讲是一套以案例为主线的课程,课程总共九章,第一章回顾基础知识,后面八章全部是以典型的案例作为讲解,选取了美食类:仿菜谱精灵微信小程序、资讯类:仿今日头条微信小程序、生鲜类:仿爱鲜蜂...
  • 微信小程序开发实战

    2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发。
  • 微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序...
  • 现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
    1. 前言
      现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。

    2. 主要内容
      springboot后端架构构建
      小程序项目构建
      小程序api调用
      后台resetful接口编写
      小程序调用后台接口
      免费的https申请
      linux下部署上线

    3. 微信小程序项目构建
      这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名,所以大家在本地编写的时候,在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。这里写图片描述
      至于微信小程序的组件,即前端页面的开发希望大家耐住寂寞认真在微信开发平台上,组件https://developers.weixin.qq.com/miniprogram/dev/component/及api:https://developers.weixin.qq.com/miniprogram/dev/api/

    4. 后端详解
      我在后端编写主要是用java,当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot,开发工具myeclipse,服务器阿里云服务器。
      创建一个maven项目,导入相关依赖:
      pom.xml依赖

        <!-- 统一版本控制 -->
    	<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>1.5.9.RELEASE</version>
    	</parent>
    	<dependencies>
    		<!-- freemarker渲染页面 -->
    		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-freemarker</artifactId>
    		</dependency>
    
    		<!-- spring boot 核心 -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    
    		<!-- springboot整合jsp -->
    		<!-- tomcat 的支持. -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    			<exclusions>
    				<exclusion>
    					<groupId>org.springframework.boot</groupId>
    					<artifactId>spring-boot-starter-tomcat</artifactId>
    				</exclusion>
    			</exclusions>
    		</dependency>
    
    		<dependency>
    			<groupId>org.apache.tomcat.embed</groupId>
    			<artifactId>tomcat-embed-jasper</artifactId>
    		</dependency>
    	</dependencies>
    

    在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。

    #jsp支持
    spring.mvc.view.suffix=.jsp
    spring.mvc.view.prefix=/WEB-INF/jsp/
    #this is set port
    #server.port=80
    server.port=443
    #添加ssl证书
    #ssl证书文件名
    server.ssl.key-store=classpath:xxxxxxx.pfx
    server.ssl.key-store-password=xxxxxxxx
    server.ssl.keyStoreType=xxxxxxxx
    

    在实际项目中可能涉及数据库,还要整合mybatis,在文章中,我仅仅做测试就不做使用数据库的测试。
    首先创建springboot的入口程序:app.class下面贴上代码:

    @ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
    @EnableAutoConfiguration
    public class App{
    
    	//启动springboot
    	public static void main(String[] args) {
    		SpringApplication.run(App.class, args);
    	}
    }
    

    启动项目时直接右击run即可。
    在写一个测试的controller进行微信小程序与java后端实现通信,controller代码如下:

    @RestController
    @SpringBootApplication
    public class ControllerText {
    	
    	@RequestMapping("getUser")
    	public Map<String, Object> getUser(){
    		System.out.println("微信小程序正在调用。。。");
    		Map<String, Object> map = new HashMap<String, Object>();
    		List<String> list = new ArrayList<String>();
     		list.add("zhangsan");
     		list.add("lisi");
     		list.add("wanger");
     		list.add("mazi");
     		map.put("list",list);
    		System.out.println("微信小程序调用完成。。。");
    		return map;
    	}
    	
    	@RequestMapping("getWord")
    	public Map<String, Object> getText(String word){
    		Map<String, Object> map = new HashMap<String, Object>();
    		String message = "我能力有限,不要为难我";
    		if ("后来".equals(word)) {
    			message="正在热映的后来的我们是刘若英的处女作。";
    		}else if("微信小程序".equals(word)){
    			message= "想获取更多微信小程序相关知识,请更多的阅读微信官方文档,还有其他更多微信开发相关的内容,学无止境。";
    		}else if("西安工业大学".equals(word)){
    			message="西安工业大学(Xi'an Technological University)简称”西安工大“,位于世界历史名城古都西安,是中国西北地区唯一一所以兵工为特色,以工为主,理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一(“兵工七子”),陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位,是一所以\"军民结合,寓军于民\"的国防科研高校。";
    		}
    		map.put("message", message);
    		return map;
    	}
    	
    	@RequestMapping("")
    	public String getText(){
    		return "hello world";
    	}
    
    
    }
    

    至此简易的后端框架及测试基本完成。
    说明:@RestController与@Controller注解的区别@RestController相当于两个注解,它能实现将后端得到的数据在前端页面(网页)中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

    1. 小程序发起网络请求
      在完成了小程序的后端开发,下面进行小程序端发起网络请求。
      下面以一个简单的按钮请求数据为例:
      wxml文件
    <button bindtap='houduanButton1'>点击发起请求</button>
    <view wx:for="{{list}}">
        姓名:{{item}}
      </view>
    
    js文件
    
     /**
       * 页面的初始数据
       */
      data: {
        list: '',
        word: '',
        message:''
    
      },
      houduanButton1: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:443/getUser',
          method: 'GET',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)//打印到控制台
            var list = res.data.list;
            if (list == null) {
              var toastText = '数据获取失败';
              wx.showToast({
                title: toastText,
                icon: '',
                duration: 2000
              });
            } else {
              that.setData({
                list: list
              })
            }
          }
        })
      }
    

    主要调用的api就是wx.request,想知道将详细的介绍大家可以去微信公众平台
    接下来以搜索类型的请求为例:
    wxml文件:

     <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input>
      <button bindtap='houduanButton2'>查询</button>
      <view wx:if="{{message!=''}}">
        {{message}}
      </view>
    

    js文件:变量的定义见上一个js文件

    //获取输入框的内容
      houduanTab_input: function (e) {
        this.setData({
          word: e.detail.value
        })
      },
      // houduanButton2的网络请求
      houduanButton2: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:443/getWord',
          data:{
            word: that.data.word
          },
          method: 'GET',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)//打印到控制台
            var message = res.data.message;
            if (message == null) {
              var toastText = '数据获取失败';
              wx.showToast({
                title: toastText,
                icon: '',
                duration: 2000
              });
            } else {
              that.setData({
                message: message
              })
            }
          }
        })
      }
    

    至此已经完成了简易的微信小程序端与java后端进行通信。
    现在可以在启动后端项目在微信开发工具上进行测试。
    演示效果:
    这里写图片描述
    这里写图片描述
    所以至此已经完成了小程序的前后端通信。

    1. https申请
      其实也不算什么申请,在购买域名之后可以申请免费的ssl证书,在前面的配置文件application.properties中有证书的配置,将证书的pfx文件直接添加到后端项目下即可。
    2. 购买服务器部署后端api代码
      对于springboot项目,本人建议打jar,直接在服务器上部署即可,在服务器上只需要安装对应版本的jdk即可。项目部署命令:
      我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。
    运行命令: nohup java -jar helloworld.jar &
    

    nohup的意思不挂服务,常驻的意思,除非云服务器重启,那就没法了;最后一个&表示执行命令后要生成日志文件nohup.out。
    当然还可以使用java -jar helloworld.jar

    源码:链接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取码: c7yf

    结束语:由于时间篇幅问题,本人介绍的内容很有限,希望对这方面有兴趣的你能有帮助。共同进步。
    觉得有帮助,给个赞赏吧。给赞赏的优先同意qq或者微信,问问题秒回复等[滑稽],谢谢老铁。
    在这里插入图片描述

    展开全文
  • 微信小程序 实例汇总 完整项目源代码
  • 微信小程序Q&A

    2020-03-28 14:15:35
    1Q:微信小程序怎么对b端收款? A:微信小程序暂时没有办法直接对b端收款!如果非要做,那就用H5的方法,展示微信收款二维码 2Q:微信小程序如何跳转第三方h5商城? A:使用web-view 并且要验证业务域名 3微信公众号如何...

    1Q:微信小程序怎么对b端收款?

    A:微信小程序暂时没有办法直接对b端收款!如果非要做,那就用H5的方法,展示微信收款二维码

    2Q:微信小程序如何跳转第三方h5商城?

    A:使用web-view 并且要验证业务域名

    3微信公众号如何挂在小程序?可以挂别人的小程序么?

    A:可以的,1公众号可关联同一个主体的小程序10个,不同主体的小程序3个。2一个小程序最多可以关联500个公众号,一个月内可以新增关联500次 。3 公众号一个月可以新增关联同主体小程序10次,不同主体三次。关联方式:公众号管理后台-小程序-小程序管理

    4Q:微信小程序向用户推送通知?

    A:小程序的推送通知只有当用户完成 支付操作等,才可以向用户推送 1 条消息,如果要推送多条消息,
    要走微信公众号的消息推送 - 微信公众号的消息推送文档 用户和微信公众号通过unioid关联起来,这样才可以无限推送消息给用户

    5Q如何引导小程序用户关注公众号

    A:于微信小程序内不支持直接识别二维码,由此不能直接弹出或者展示二维码就不管了。
    1.引导用户下载微信公众号二维码,并给出正确提示
    2.向用户展示微信公众号名称,并提供一键复制按钮,给出正确提示
    3.使用 official-account组件,但是这个有使用条件,只有当用户是扫码进来的才会生效
    4.给出正确提示,引导用户打开微信小程序客服消息,在客服消息中自动回复微信公众号二维码,这里的二维码可以直接识别

    6Q如和引导微信公众号的粉丝使用微信小程序

    A:首先在微信公众平台关联小程序,
    1.在微信自定义菜单中配置-跳转小程序-指定跳转页面-可以带参数用?和&链接
    2.在微信公众号自动回复里或者推文里配置 <a data-miniprogram-appid="小程序id " data-miniprogram-path="指定跳转的路径" href="http://www.qq.com">限制的内容</a>
    3.新建素材管理时,选择-小程序-选择小程序-选择展示方式(文字,图片,小程序码,小程序卡片)
    

    7Q小程序是否可以跳转其他小程序?

    A:可以的
    在 2.4.0 版本以后,使用wx.navigateToMiniProgram,在小程序全局配置中配置了就可以跳转,最多都不超过10个文档

    8小程序和app之间可以跳转么?

    A:可以的,不过有一些限制,具体的再这篇博文里小程序与其他平台跳转

    9小程序可以配置只能从公众号进去吗?

    A:可以的,
    1.一方面在微信公众平台-设置-基本设置-隐私设置-设置是否允许用户通过名称搜索到小程序帐号
    这样的方法可以杜绝大部分用户
    2.在1的基础之上,小程序端也可以判断小程序的进入场景,在程序上做下限制

    10微信小程序可以和微信公众号的h5,实行免密登录么?( 其中一个平台登录了,另外的平台都无需登录)

    A:可以的,在微信开放平台绑定到一起,然后用unionid关联

    11微信小程序的收银台可以被h5调用么?

    A:如果是通过web-view调用的h5,是可以的,反之则不可以

    12微信小程序可以调用h5的收银台么?

    A:使用web-view是可以的,不过要配置业务域名

    13小程序能感知到用户的来源么?

    A:可以的

    14公众号跳转第三方h5有什么限制么?

    A:暂时没有

    15关于unionid有什么要讲的么?

    A:在同一主体下,微信公众号和微信小程序获取到的是一致的,反之则不然

    展开全文
  • 小程序 Bug openSetting 工具 6.7.2 2.3.0 -当前 Bug 的表现(可附上截图) 官方说明了openSetting的调用是支持通过tap去触发showModal,再在showModal中调起的,但实际操作后,与...
    问题模块框架类型问题类型API/组件名称终端类型微信版本基础库版本
    API和组件 小程序 Bug openSetting 工具 6.7.2 2.3.0

    当前 Bug 的表现(可附上截图)

    官方说明了openSetting的调用是支持通过tap去触发showModal,再在showModal中调起的,但实际操作后,与说明的有出入。

    由于实际开发中,为了方便授权,会将getSetting,showModal,openSetting封装于一个函数,方便检测权限并授权,但也应该是满足了以上说的在tap中触发的要求,但测试后,却还是显示如下提示

    VM255:1 openSetting:fail can only be invoked by user TAP gesture.

     

    预期表现

    支持通过tap去触发showModal,再在showModal中调起openSetting

     

    复现路径

    导入代码片段(需填写appid,因为需要用到授权),如下操作:

    1、点击授权,此时点击“取消”拒绝授权

    2、再次点击授权,此时由于判断用户已经拒绝过授权,所以会去调用showModal显示确认授权框,此时点击”确定“,回去调用openSetting。这个时候见控制台,就会有如下提示

    openSetting:fail can only be invoked by user TAP gesture.

     

    提供一个最简复现 Demo

    代码片段:wechatide://minicode/PrIPLomJ7222

     

    - 结论及解决方案

    经官方开发解答,由于封装的过程中使用了promise的方式去处理回调才导致的问题,改成直接普通的回调方式即可解决问题;

    因此也就是原来的判断方式和流程不变,只需要修改一下回调方式即可。

    解决后的代码片段:wechatide://minicode/wyAMUrmb7X2L

     

     
     

     

     此文章为转载
    展开全文
  • WXML &lt;view class='container'&gt; &lt;view class='month flex m-around'&gt; &lt;view class='arrow' bindtap='prevMonth'&gt;《 &lt;/view&gt;...pic...

    WXML

    <view class='container'>
    <view class='month flex m-around'>
        <view class='arrow' bindtap='prevMonth'>《 </view>
        <view class='year-and-month'>
            <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange">
            <view>
                {{date}}
            </view>
            </picker>
        </view>
        <view class='arrow' bindtap='nextMonth'> 》</view>
    </view>
    <view class='calendar flex column s-center'>
      <view class='week-row flex m-around'>
        <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view>
      </view>
      <swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'>
        <swiper-item class='flex m-around days-table '>
          <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date'
            class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
            <!-- <view>{{x.date === today?'今天':x.day}}</view> -->
            <view>{{x.day}}</view>
          </view>
        </swiper-item>
        <swiper-item class='flex m-around days-table '>
          <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date'
            class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}'  bindtap='bindDayTap'>
            <!-- <view>{{x.date === today?'今天':x.day}}</view> -->
            <view>{{x.day}}</view>
          </view>
        </swiper-item>
        <swiper-item class='flex m-around days-table'>
          <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date'
            class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
            <!-- <view>{{x.date === today?'今天':x.day}}</view> -->
            <view>{{x.day}}</view>
          </view>
        </swiper-item>
        <swiper-item class='flex m-around days-table '>
          <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date'
            class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
            <!-- <view>{{x.date === today?'今天':x.day}}</view> -->
            <view>{{x.day}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    </view>
    

     

    CSS

    .container {
      height: 100vh;
    
      background-color: #393E44;
    }
    .days-table {
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .calendar{
      position: fixed;
      z-index:10000;
      background: #393E44;
      
    }
    .grid {
      width: 107.14rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size:.7rem;
      color:#fff;
    }
    .today {
      color: #88a1fd;
    }
    .grid view {
      height:85rpx;
      line-height: 85rpx;
      width:85rpx;
    }
    .choice view{
      border-radius: 50%;
      background: #88a1fd;
      background-position:center;
      color: white;
    }
    /* 非本月日期 */
    .notCurrent {
      color: silver;
    }
    .day-hover {
      background: red;
    }
    .swpier-box {
      height: 550rpx;
      width: 100%;
    }
    .arrow {
      width: 100rpx;
      color: #88a1fd;
      text-align: center;
    }
    .year-and-month{
      color: #88a1fd;
    }
    
    .flex {
      display: flex;
    }
    /* 轴向 */
    .column {
      flex-direction: column;
    }
    /* 主轴方向 */
    .m-start {
      justify-content: flex-start;
    }
    
    .m-end {
      justify-content: flex-end;
    }
    
    .m-around {
      justify-content: space-around;
    }
    .m-between {
      justify-content: space-between;
    }
    .m-center {
      justify-content: center;
    }
    /* 侧轴方向 */
    .s-start {
      align-items: flex-start;
    }
    .s-end {
      align-items: flex-end;
    }
    
    .s-around {
      align-items: space-around;
    }
    .s-between {
      align-items: space-between;
    }
    .s-center {
      align-items: center;
    }
    

    JS

    'use strict';
    
    let choose_year = null,
      choose_month = null;
    const conf = {
      data: {
        day: '',
        year: '',
        month: '',
        date: '2017-01',
        today: '',
        week: ['日', '一', '二', '三', '四', '五', '六'],
        calendar: {
          first: [],
          second: [],
          third: [],
          fourth: []
        },
        swiperMap: ['first', 'second', 'third', 'fourth'],
        swiperIndex: 1,
        showCaldenlar: false
      },
      onLoad() {
        const date = new Date()
          , month = this.formatMonth(date.getMonth() + 1)
          , year = date.getFullYear()
          , day = this.formatDay(date.getDate())
          , today = `${year}-${month}-${day}`
        let calendar = this.generateThreeMonths(year, month)
    
        this.setData({
          calendar,
          month,
          year,
          day,
          today,
          beSelectDate: today,
          date: `${year}-${month}`
        })
      },
    
      showCaldenlar() {
        this.setData({
          showCaldenlar: !this.data.showCaldenlar
        })
      },
    	/**
    	 * 
    	 * 左右滑动
    	 * @param {any} e 
    	 */
      swiperChange(e) {
        const lastIndex = this.data.swiperIndex
          , currentIndex = e.detail.current
        let flag = false
          , { year, month, day, today, date, calendar, swiperMap } = this.data
          , change = swiperMap[(lastIndex + 2) % 4]
          , time = this.countMonth(year, month)
          , key = 'lastMonth'
    
        if (lastIndex > currentIndex) {
          lastIndex === 3 && currentIndex === 0
            ? flag = true
            : null
        } else {
          lastIndex === 0 && currentIndex === 3
            ? null
            : flag = true
        }
        if (flag) {
          key = 'nextMonth'
        }
    
        year = time[key].year
        month = time[key].month
        date = `${year}-${month}`
        day = ''
        if (today.indexOf(date) !== -1) {
          day = today.slice(-2)
        }
    
        time = this.countMonth(year, month)
        calendar[change] = null
        calendar[change] = this.generateAllDays(time[key].year, time[key].month)
    
        this.setData({
          swiperIndex: currentIndex,
          //文档上不推荐这么做,但是滑动并不会改变current的值,所以随之而来的计算会出错
          year,
          month,
          date,
          day,
          calendar
        })
      },
    	/**
    	 * 
    	 * 点击切换月份,生成本月视图以及临近两个月的视图
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @returns {object} calendar
    	 */
      generateThreeMonths(year, month) {
        let { swiperIndex, swiperMap, calendar } = this.data
          , thisKey = swiperMap[swiperIndex]
          , lastKey = swiperMap[swiperIndex - 1 === -1 ? 3 : swiperIndex - 1]
          , nextKey = swiperMap[swiperIndex + 1 === 4 ? 0 : swiperIndex + 1]
          , time = this.countMonth(year, month)
        delete calendar[lastKey]
        calendar[lastKey] = this.generateAllDays(time.lastMonth.year, time.lastMonth.month)
        delete calendar[thisKey]
        calendar[thisKey] = this.generateAllDays(time.thisMonth.year, time.thisMonth.month)
        delete calendar[nextKey]
        calendar[nextKey] = this.generateAllDays(time.nextMonth.year, time.nextMonth.month)
        return calendar
      },
      
      bindDayTap(e) {
        let { month, year } = this.data
          , time = this.countMonth(year, month)
          , tapMon = e.currentTarget.dataset.month
          , day = e.currentTarget.dataset.day
        if (tapMon == time.lastMonth.month) {
          this.changeDate(time.lastMonth.year, time.lastMonth.month)
        } else if (tapMon == time.nextMonth.month) {
          this.changeDate(time.nextMonth.year, time.nextMonth.month)
        } else {
          this.setData({
            day
          })
        }
        let beSelectDate = e.currentTarget.dataset.date;
        this.setData({
          beSelectDate,
          showCaldenlar: false
        })
      },
      bindDateChange(e) {
        if (e.detail.value === this.data.date) {
          return
        }
    
        const month = e.detail.value.slice(-2)
          , year = e.detail.value.slice(0, 4)
    
        this.changeDate(year, month)
      },
      prevMonth(e) {
        let { year, month } = this.data
          , time = this.countMonth(year, month)
        this.changeDate(time.lastMonth.year, time.lastMonth.month)
      },
      nextMonth(e) {
        let { year, month } = this.data
          , time = this.countMonth(year, month)
        this.changeDate(time.nextMonth.year, time.nextMonth.month)
      },
    	/**
    	 * 
    	 * 直接改变日期
    	 * @param {any} year 
    	 * @param {any} month 
    	 */
      changeDate(year, month) {
        let { day, today } = this.data
          , calendar = this.generateThreeMonths(year, month)
          , date = `${year}-${month}`
        date.indexOf(today) === -1
          ? day = '01'
          : day = today.slice(-2)
    
        this.setData({
          calendar,
          day,
          date,
          month,
          year,
        })
      },
    	/**
    	 * 
    	 * 月份处理
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @returns 
    	 */
      countMonth(year, month) {
        let lastMonth = {
          month: this.formatMonth(parseInt(month) - 1)
        }
          , thisMonth = {
            year,
            month,
            num: this.getNumOfDays(year, month)
          }
          , nextMonth = {
            month: this.formatMonth(parseInt(month) + 1)
          }
    
        lastMonth.year = parseInt(month) === 1 && parseInt(lastMonth.month) === 12
          ? `${parseInt(year) - 1}`
          : year + ''
        lastMonth.num = this.getNumOfDays(lastMonth.year, lastMonth.month)
        nextMonth.year = parseInt(month) === 12 && parseInt(nextMonth.month) === 1
          ? `${parseInt(year) + 1}`
          : year + ''
        nextMonth.num = this.getNumOfDays(nextMonth.year, nextMonth.month)
        return {
          lastMonth,
          thisMonth,
          nextMonth
        }
      },
      currentMonthDays(year, month) {
        const numOfDays = this.getNumOfDays(year, month)
        return this.generateDays(year, month, numOfDays)
      },
    	/**
    	 * 生成上个月应显示的天
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @returns 
    	 */
      lastMonthDays(year, month) {
        const lastMonth = this.formatMonth(parseInt(month) - 1)
          , lastMonthYear = parseInt(month) === 1 && parseInt(lastMonth) === 12
            ? `${parseInt(year) - 1}`
            : year
          , lastNum = this.getNumOfDays(lastMonthYear, lastMonth) //上月天数
        let startWeek = this.getWeekOfDate(year, month - 1, 1) //本月1号是周几
          , days = []
        if (startWeek == 7) {
          return days
        }
    
        const startDay = lastNum - startWeek
    
        return this.generateDays(lastMonthYear, lastMonth, lastNum, { startNum: startDay, notCurrent: true })
      },
    	/**
    	 * 生成下个月应显示天
    	 * @param {any} year 
    	 * @param {any} month
    	 * @returns 
    	 */
      nextMonthDays(year, month) {
        const nextMonth = this.formatMonth(parseInt(month) + 1)
          , nextMonthYear = parseInt(month) === 12 && parseInt(nextMonth) === 1
            ? `${parseInt(year) + 1}`
            : year
          , nextNum = this.getNumOfDays(nextMonthYear, nextMonth)  //下月天数
        let endWeek = this.getWeekOfDate(year, month)						 //本月最后一天是周几
          , days = []
          , daysNum = 0
        if (endWeek == 6) {
          return days
        } else if (endWeek == 7) {
          daysNum = 6
        } else {
          daysNum = 6 - endWeek
        }
        return this.generateDays(nextMonthYear, nextMonth, daysNum, { startNum: 1, notCurrent: true })
      },
    	/**
    	 * 
    	 * 生成一个月的日历
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @returns Array
    	 */
      generateAllDays(year, month) {
        let lastMonth = this.lastMonthDays(year, month)
          , thisMonth = this.currentMonthDays(year, month)
          , nextMonth = this.nextMonthDays(year, month)
          , days = [].concat(lastMonth, thisMonth, nextMonth)
        return days
      },
    	/**
    	 * 
    	 * 生成日详情
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @param {any} daysNum 
    	 * @param {boolean} [option={
    	 * 		startNum:1,
    	 * 		grey: false
    	 * 	}] 
    	 * @returns Array 日期对象数组
    	 */
      generateDays(year, month, daysNum, option = {
        startNum: 1,
        notCurrent: false
      }) {
        const weekMap = ['一', '二', '三', '四', '五', '六', '日']
        let days = []
        for (let i = option.startNum; i <= daysNum; i++) {
          let week = weekMap[new Date(year, month - 1, i).getUTCDay()]
          let day = this.formatDay(i)
          days.push({
            date: `${year}-${month}-${day}`,
            event: false,
            day,
            week,
            month,
            year
          })
        }
        return days
      },
    	/**
    	 * 
    	 * 获取指定月第n天是周几		|
    	 * 9月第1天: 2017, 08, 1 |
    	 * 9月第31天:2017, 09, 0 
    	 * @param {any} year 
    	 * @param {any} month 
    	 * @param {number} [day=0] 0为最后一天,1为第一天
    	 * @returns number 周 1-7, 
    	 */
      getWeekOfDate(year, month, day = 0) {
        let dateOfMonth = new Date(year, month, 0).getUTCDay() + 1;
        dateOfMonth == 7 ? dateOfMonth = 0 : '';
        return dateOfMonth;
      },
    	/**
    	 * 
    	 * 获取本月天数
    	 * @param {number} year 
    	 * @param {number} month 
    	 * @param {number} [day=0] 0为本月0最后一天的
    	 * @returns number 1-31
    	 */
      getNumOfDays(year, month, day = 0) {
        return new Date(year, month, day).getDate()
      },
    	/**
    	 * 
    	 * 月份处理
    	 * @param {number} month 
    	 * @returns format month MM 1-12
    	 */
      formatMonth(month) {
        let monthStr = ''
        if (month > 12 || month < 1) {
          monthStr = Math.abs(month - 12) + ''
        } else {
          monthStr = month + ''
        }
        monthStr = `${monthStr.length > 1 ? '' : '0'}${monthStr}`
        return monthStr
      },
      formatDay(day) {
        return `${(day + '').length > 1 ? '' : '0'}${day}`
      }
    }
    Page(conf)
    

    效果图

    在这里插入图片描述

    展开全文
  • 本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序里不免需要列表显示,有时候需要两排或者三排并列 我的想法是显示一个大view,里面再包含一个wx:for 循环,里面的cell(姑且这么叫),肯定是一个float:left。 关键是这个大的view属性该如何写, 这样写...
  • 微信小程序的布局css样式 参考自 珺L 文字 width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-weight:bold; /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1...
  • 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', })跳转到...
  • 微信小程序连接蓝牙教程(目录) 1、新建小程序项目 2、初始化蓝牙适配器(wx.openBluetoothAdapter) 3、获取蓝牙适配器状态(getBluetoothAdapterState) 4、搜索蓝牙设备(startBluetoothDevicesDiscovery) 5、...
  • 微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,——微信小程序开发也就那么回事。你只需要一点点css(真的只要一点点)的基础就...
  • ... 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; ... 3,页面自动刷新当前页面;... 三种实现js 刷新当前... 1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序
  • 微信小程序+java后台

    2018-03-21 21:30:58
    博主是大四学生,毕业设计做的是微信小程序+java后台。陆陆续续经历了三个月(因为白天要实习又碰上过年玩了一阵子),从对微信小程序一无所知到完成毕设,碰到许多问题,在跟大家分享一下自己的经历和一个小程序...
  • 都是些小程序源码,有的还有后台,适合小白、也适合学过了的、也适合做外包的,要的可以取...https://www.douban.com/group/topic/113284790/o2o微信小程序源码-专门针对o2o类别的小程序源码集合【更新整理中...】ht...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 很多朋友都认为微信小程序申请、部署、发布很难,需要很长时间。 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发、部署、发布的方式。当然,实现的...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口...
1 2 3 4 5 ... 20
收藏数 247,316
精华内容 98,926
关键字:

微信小程序