微信小程序_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - 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或者微信,问问题秒回复等[滑稽],谢谢老铁。
    在这里插入图片描述

    展开全文
  • 微信小程序 实例汇总 完整项目源代码
  • 电影小程序案例: 主界面如下:通过调用豆瓣电影的API接口获取到的信息,每次 加载10条数据,当滚动 条每次滚动到最低端的时候,自动通过异步再加载10条 评价按钮: 还可以上传图片并提交评价,提交的评价...

    电影小程序案例:

    主界面如下:通过调用豆瓣电影的API接口获取到的信息,每次 加载10条数据,当滚动 条每次滚动到最低端的时候,自动通过异步再加载10条

    评价按钮:

    还可以上传图片并提交评价,提交的评价或者图片都是 储存到云存储当中,吧图片、评分以及评价的fileID存到我们 的云数据库当中,

    而另一个选项:显示头像、用户名称以及openid

    那么我们开始创建项目:后端服务选择小程序.云开发

    目录也要创建在一个空文件夹

    初始界面如下:

    然后把pages下一级目录全部删除,这个时候会有报错,

    那么 我们把app.json文件内容的路由部分全删除就OK了!

    删除之后我们重新创建两个文件夹,在创建文件夹的时候千万不要上下级目录重名,否则可能会创建失败。创建好后并且保存(Ctrl+S),这个时候两个文件夹下面会自动生成配置文件等等。

    app.json文件初始配置 

    {
      "pages": [
        "pages/movie/movies",
        "pages/profile/profiles"
      ],
      "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#E54847",
        "navigationBarTitleText": "最新电影",
        "navigationBarTextStyle": "white"
      },
      "tabBar": {
        "color": "#000",//表示字体没有被选择的时候的颜色
        "selectedColor": "#E54847",//表示字体被选择的时候的颜色
        "list": [{
          "pagePath": "pages/movie/movies",//tabBar分页路由路劲
          "text": "电影",
          "iconPath": "images/j.png",//指的是当前tabBar没有被选中的图片路劲
          "selectedIconPath": "images/k.png"//指的是当前tabBar被选中的图片路劲
        },{
          "pagePath": "pages/profile/profiles",//tabBar分页路由路劲
          "text": "我的",
          "iconPath": "images/l.png",//指的是当前tabBar没有被选中的图片路劲
          "selectedIconPath": "images/m.png"//指的是当前tabBar被选中的图片路劲
        }]
      }
    }

    然后把pages以及images文件夹下面的文件或者图片都删除,然后用自己准备的图片,或者 重新创建分页文件等。

    上面这段代码中list数组是有要求的,最少2个选项,最多5个选项。如下就是2个的。

    接下来学习如何在我们的小程序项目当中引用第三方组件库,其实

    第三方组件库的作用,是我们在小程序项目开发过程中,有些组件或者有些样式我们是不需要去自己写的,我们可以引用第三方组件库,就能快速实现我们界面的一个需求。

    那么如何安装我们的组件库呢?先去官网

    安装:

    当然,在安装之前,我们需要进行一些代码的初始化设置,

    首先找到miniprogram文件夹,打开终端,当然笔者不知道 为什么,我打开终端会显示npm或者node 不是内部或者 外部命令 ,但是笔者环境都是配置好了的,但是笔者想到了一个 最佳的办法

    那就是先点击硬盘打开,然后在同时在进入 miniprogram文件夹里面,然后按住shift并同时点击 鼠标左键,选择打开命令窗口

    这个时候再输入相应的命令,进行下载或者操作 。

    首先输入npm init命令,这个相当于初始miliprogram文件

    当然在初始化过程中,我们遇到下面如版本号啥的,就一路回车就好了!

    一路回车完了后,在 miniprogram文件夹下面就会生成一个package.json文件,这个文件时 对当前miniprogram这个项目的配置信息以及一些另外的包的管理在这个文件当中进行相应的配置,

    然后安装vant,并输入命令npm i vant-weapp -S --production这个命令是通过npm安装vant,安装的过程中或者结束,务必点击菜单栏的“工具”选项,然后点击“构建npm”选项。然后点击确定。

    这个时候miniprogram文件夹下面多了一个miniprogram_npm包,这个包里面实际上就是我们的一个vant这样一个请求库。

    然后点击界面的“详情”,选择“使用npm模块”

    选中之后,我们的vant组件库才能起作用。

    那么我们接下来先验证一下vant能否起作用?

    当然,在 使用组件库之前我们应该引入组件库 、

    视频看到 4-2Vant组件库 。!!!!!!!!!!

    我们先显示一个vant组件库的按钮。

    这个时候就可以看到对应的按钮就可以在界面上显示了,也就是说,我们的vant组件库已经顺利的在我们的项目中被引用了。

    接下来我们去完成电影列表的问题。

    电影列表的信息,是通过豆瓣电影的API接口获取的,而不是笔者写死的。

    也就是我要从我的小程序端要想豆瓣电影的服务端去发起一个请求,那么我们先来看一下在小程序端如何发起请求 ,

    发起请求的方式一共有两种,小程序端和云函数。

    一种是在小程序端发送请求,另一种是我们可以在云函数中发起请求。

    如果在小程序 端发送请求,那么小程序端中有一个 API函数叫做wx.request(),通过这个函数可以通过小程序端直接向某一个服务端发起请求,如果我们通过云函数发起请求,那么其实是通过小程序的后端去发送请求。这个时候我们可以在小程序的云函数当中去安装第三方库。比如说常用的request,got等都可以 发起请求,在云函数端支持的协议是取决于第三方库的。一般情况下支持https/http均可以支持,在小程序端发起请求,请求回来的域名一定要经过ICP备案,才能去请求,否则 的话是不可以的,那么在云函数端的请求他的限制是比较开放一些。可以不经过备案,也可以去发送请求。所以 我们可以通过两种方式向豆瓣电影接口发起请求。而我们接下来是通过云函数发起请求来演示的。

    我们先来 演示如何 通过第三方库request发送请求,首先登陆GitHub官网,

    选择request当中一个request-promise方法,点击进去。当然你也可以直接在GitHub上面直接搜索request-promise方法,

    如果需要用这个方法(request-promise),我们需要先安装request,然后再安装request-promise方法(如下:)

    cloudfunctions作为云函数端,我们要通过云函数,首先我们得先创建一个云函数,在cloudfunctions下一级目录。

    创建好了我们就使用终端打开,在终端中输入第一条安装request的命令,安装完这个包后,就安装request -promise这个包,但是得记住,必须得先按照request这个包,然后再安装request-promise这个包。

    当安装好这两个包后,在我们的cloudfunctions下一级目录movielist里的package.json里面就会对应两个包的版本。(如下:)

    那么我们如何通过request-promise去发送一个请求呢?当然也很简单,我们打开index.js文件,首先引入我们的request-promise,

    指令为

    var rp = require('request-promise');

    这条指令在GitHub里面也有,

    引入之后,我们再看GitHub里面有一个rp函数,

    rp('http://www.google.com')
        .then(function (htmlString) {
            // Process html...
        })
        .catch(function (err) {
            // Crawling failed...
        });
    

    我们直接在云函数入口函数中直接通过rp函数发起请求,直接把请求结果返回,

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    var rp = require('request-promise');
    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters`)
        .then(function(htmlString) {
    .........
        })
        .catch(function(err) {
    .........
        });
    }

    rp的第一个参数是当前我要请求的地址,这个地址指的是豆瓣电影的列表接口

    其实我们在请求的时候,我们要对数据进行分页的请求,比如说我们不可能一次把所有数据都请求回来,假设我每次请求10条,通过ES6的一个叫字符串模板拼接,这样的话我们可以不通过加号拼接,这样看起来 可读性较强。

    start是请求回来的值,而count是一次去请求多少条数据。当然这些值在调用的时候都会传回到我们的云函数里面。

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    var rp = require('request-promise');
    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`)
        .then(function(res) {
          return res;
        })
        .catch(function(err) {
          console.err(err);
        });
    }

    .then是表示请求成功的话,而.catch是表示请求失败的话。res表示请求回来的结果,return直接把请求回来的结果返回,如果报错我们也通过控制台打印错误信息,便于我们去找到对应的问题。

    当我们定义好云函数后,我们就在云函数的文件上右键上传并部署我们的云函数 。

    我们回到我们的电影主界面,movie目录,电机打开movies.js文件,在这个.js文件当中我们需要做的是当加载电影这个 界面的时候,我们就要去发送请求,也就是说,我需要去调用刚刚定义好的云函数 ,在movies.js当中定义了很多生命周期函数,也就是钩子函数。 这些钩子函数是会当生命周期到达这个阶段的时候会被自动的调用,那么我们直接在onLoad这个函数,这是一个监听页面加载函数,也就是页面加载的时候会自动去加载这个onLoad函数,

    然后我们直接在onLoad里面直接去调用我们的云函数 ,用cloud.callFunction()的方式去调用云函数,

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        });
      },

    那么在movielist/index.js里面的回调函数中我也想打印这个值,怎么办呢?通过云函数在控制台显示,写一个console.log(res);

    因为我想演示一下,这个打印值在哪儿去看。一定要谨记,只要云函数被改动,一定得随时上传并部署。

    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`)
        .then(function(res) {
          console.log(res);//在调用云函数的时候也看看这个值
          return res;
        })
        .catch(function(err) {
          console.err(err);
        });
    }

    打开云开发,点击云函数,在我们的云开发中,已经有我们刚创建的云函数movielist,点击刷新可出来。

    那么我们来试一下,现在打开我们的调试器,点击编译,可以看当前在控制台显示的结果,当然这个结果我们是在小程序端打印的。

    注意,随时上传并部署云函数(常犯错误请看另一个 博客)。 

    其中注意,云函数里面写的console.log(res)并不会打印在console里面,因为我们的云函数是运行于服务端的。服务端的日志是不会打印纸top控制台里面,其云函数的日志可以在 云开发控制台的云函数的日志里面看到,如下:

    所以,movielist/index.js下面的console.log(res)打印的日志就如上图所示,而控制台显示的并不是这个console.log(res)的信息。

    找日志,不要去云函数 找,找不到的,因为我们的云函数是运行于服务端的。这个日志是res,而console.log他就是在控制台打印,那么说console.log(res)是不是就是把日志打印到了控制台呢,并不是,只有return res才把日志返回到服务端的云函数日志里面。所以控制台 显示的并不是res。

    而小程序控制台显示的是结果,如下:

    那么如果,我们想要去显示数据在页面上,需要在pages/movie.js的data函数里面去定义一个对应的值。

    比如说我们定义一个电影的列表:movieList: [ ]

    data: {

    movieList: []

    },

    那么我们也可以看到,控制台里面返回的result其实是一个字符串(通过看大括号有双引号),字符串并不利于我们去获取这个值,而我们想要的是这个字符串里面subject里面的数组,subject对应的其实才是我们想要的列表。

    那么,我们想要这个列表,我们就在onLoad函数里面加一个this.setData方法,通过这个方法 给movieList赋值,在赋值的时候我们直接去解析我们当前的字符串,我们要解析的是res.result,如何解析呢?有JS基础的同学都知道,如何把一个JS变成一个 对象,我们应该通过JSON.parse的方式,我们通过这种方式直接把字符串解析成对象,代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList:JSON.parse(res.result).subjects
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    后面还得加一个subjects,因为我们需要的是字符串result里面的subject。

    而我们需要把当前返回的结果追加到movieList的结果里面。为什么要追加,而不是直接赋值?

    你想想,如果直接赋值,那每次刷新10条(异步加载 10条),如果 不是追加,那么他将会覆盖掉之前的,所以我们要追加,就不会覆盖以前的。

    所以 我们每次操作,应该先取到movieList的值然后把获取到的字符串列表转化的对象追加到原来的movieList

    先去到movieList的值:     this.data.movieLst()

    然后追加到movieList:     movieList:this.data.movieList(JOSN.parse(res.result).subjects)

    所以代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    那么,我们每次取的时候,还要跟一个对应的参数,所以我们应该在云函数名字后面再跟一个参数。也许你会想到下面这种,但是不正确。

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: 0,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    参数内容包括我们从第几条开始去取,第一次从第0条开始取所以start=0,每次取10条,所以count=10,那第二次呢?第二次从第10条开始取,取到第20条,那么第三次呢第四次呢?

    所以每次取的值start是改变的!

    那么这个start的值其实和movieList的长度是一样的!

    正确的代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    那么我们也应该将这些内容呈现在“电影页面”,所以我们要写movie/movies.wxml文件

    <view class="movies" wx:for="{{movieList}}" wx:key="{{index}}">
      <image src="{{item.images.small}}"></image>
      <view class="movie-info">
        <view class="movie-title">{{item.title}}</view>
        <view>观众评分: {{item.rating.average}}分</view>
        <view wx:for="{{item.casts}}">
          {{item.name}}
        </view> 
        <view>年份:{{item.year}}</view>
      </view>
    </view>

    写好后,这个时候 ,编辑窗体显示如下:

    这个时候我们再去写一些CSS代码,这个在微信小程序里面,应该叫微信SS(wxss)

    .movie{

    height: 300rpx;//给我们的电影设置高度

    display: flex;//设置一个弹性盒子

    }

    因为view这样一个标签是块儿元素,他自己会占用一行,所以各位演员的名字各自占了一行,如果要排成一行,我们就不能用view标签。所以我们应该把循环演员的标签作为一个行级标签 放在块级标签里面。(如下:)

        <view >演员:
        <text wx:for="{{item.casts}}">{{item.name}}  </text>      
        </view> 

    那么关于 演员名字之间的空格,有两种方式。

    第一是:view标签演员的后面打空格

    第二是:{{item.name}}后面加空格

    那么此时movie/movies.wxss文件

    .movies{
      height: 300rpx;
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }
    
    .movie-img{
      width: 200rpx;
      height: 100%;
    }
    
    .movie-info{
      flex: 1;
    }
    
    .movie-title{
      color: #666;
      font-size: 40rpx;
      font-weight: bolder;
    }
    
    .movie-average{
      color: #faaf00;
    }

    那么如何让我们在翻到最底部的时候,能够异步加载呢?

    当我们界面加载的时候,其实

    wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
          });
        }).catch(err=>{
          console.error(err);
        });

    上面这个函数(这段代码)的意思是向服务端发送请求,请求回我们的电影信息,当我们滚动条滚动到底部的时候是不是还应该执行这段代码?

    所以我们把这段代码单独提取到一个函数里,比如说我们把这段代码提取到getMovieList函数了,其内容就为这段代码,当然,我们在请求的时候,我们应该有一些更好的提示,比如一个等待加载框,当请求成功后,我们就把这个加载框隐藏。通过wx.hideLoading()方法隐藏,当然,失败的话我们也要把它隐藏掉。

    代码如下:

    // pages/movie/movies.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        movieList:  []
      },
    
      getMovieList: function(){
        wx.showLoading({
          title: '加载中',
        })
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res => {
          console.log(res);
          this.setData({
            movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
          });
          wx.hideLoading()//当请求成功后隐藏加载框
        }).catch(err => {
          console.error(err);
          wx.hideLoading()//如果失败也要隐藏掉
        });
      },
    //我们现在要通过movies.wxml这个文件跳转到comments.wxml
      gotoComment: function(event){
        wx.navigateTo({
          url: `../comment/comments?movieid=${event.target.dataset.movieid}`,
        });
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getMovieList();
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        this.getMovieList();
      },
    
    })

    下面来做一个评价按钮,以及一个评价界面。

    <view class="movies" wx:for="{{movieList}}" wx:key="{{index}}">
      <image src="{{item.images.small}}" class="movie-img"></image>
      <view class="movie-info">
        <view class="movie-title">{{item.title}}</view>
        <view>观众评分: 
          <text class="movie-average">{{item.rating.average}}分</text> 
        </view>
        <view >演员:
          <text wx:for="{{item.casts}}">{{item.name}}  </text>      
        </view> 
        <view>年份:{{item.year}}</view>
      </view>
      <button bindtap="gotoComment" data-movieid="{{item.id}}" class="movie-conmment">评价</button>
    </view>
    .movie-conmment{
      height: 60rpx;
      background: #E54847;
      color: #fff;
      font-size: 26rpx;
      margin-top: 120rpx;
    }
    //pages/comment/comments.js
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options);
      },

    现在评价按钮以及movies.js里面的界面都做好了。

    其中,options是一个对象,里面对应的是movieid;

    那么,我们现在可以根据这个movieid再去 豆瓣电影接口去获取到id所对应的详情界面,还是如上,在云函数里面创建一个node.js云函数,用于获取详情。

    每次创建新的云函数的时候,都要安装request以及request-promise这两个包,安装这两个包的命令前面也提到过,安装好后

    要用云函数,就要把request-promise引入过来,即

     

    var rp = require('request-promise');

    放在cloud.init()的下面。

    然后把查询到的结果返回到小程序端,

    查询到的结果如下:

    rp('http://www.google.com')
        .then(function (htmlString) {
            // Process html...
        })
        .catch(function (err) {
            // Crawling failed...
        });

    放到小程序端,

    将云函数里面的这些东西都提前删除,用不到的,也就是现在注释的这些。

    // 云函数入口函数
    exports.main = async (event, context) => {
      // const wxContext = cloud.getWXContext()
    
      return {
        // event,
        // openid: wxContext.OPENID,
        // appid: wxContext.APPID,
        // unionid: wxContext.UNIONID,
      }
    }

    然后就变为下面这:

    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return {
    
      }
    }

    将查询到的结果,用于返回到小程序端:

    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp('详情的URL地址')
        .then(function (htmlString) {
          // Process html...
        })
        .catch(function (err) {
          // Crawling failed...
        });
    }

    注意:详情的URL地址 的两端用ES6的字符串模板符,即 ` `  这样的符号,他是英文状态下的Esc下面的那个键,可以直接去拼接其他东西,比英文状态下的单引号简单一点。 

    rp(`http://api.douban.com/v2/movie/subject/id`)

    那么用详情的URL地址去拼接上前端传回来的movieid

    rp(`http://api.douban.com/v2/movie/subject/?apikey=0df993c66c0c636e29ecbb5344252a4a${event.movieid}`)

    这个时候,我们的控制台就会显示如下:

    可以看到,加载的10个电影,而且点击评价后,跳转到页面pages/comment/comments,并且有50条数据。

    然后我们在吧这个评价在pages/comment/comments.wxml这个页面中好好做一下。

     

     

     

     

    展开全文
  • 小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。这里注册一个小程序账号体验一下。接收流程每个邮箱仅能申请一个小程序注册页面https://mp.weixin.qq.com/wxopen/waregister?action=step1这时你会...

    小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。这里注册一个小程序账号体验一下。


    接收流程


    每个邮箱仅能申请一个小程序

    注册页面

    https://mp.weixin.qq.com/wxopen/waregister?action=step1


    这时你会收到来自 weixinteam@tencent.com 的邮件,点击邮件中的链接验证。


    激活成功后需要进入用户信息登记,这时发现对开发者那么不友好,居然不支持个人身份


    我只是想看一看了解一下,所以选择其它组织,组织信息和图片也是随便填写和上传的。


    查看更多你会注意到,这小程序的利益目的是很重的。审核费:300RMB。

    而实际上使用的认证技术可能只是在““FIDO联盟”(Fast IDentityOnline,快速身份识别在线联盟,世界顶尖身份认证技术组织,旨在代替用户对密码传统的依赖)”基础上加上了自己的一点特色。


    注意:对于个人注册只是为了了解一下,上面的组织信息你可以随便的填写,但这管理信息登记必须使用和你的微信一致的身份信息,否则后面就尴尬尴尬尴尬了。

    当你完成管理员信息登记之后,就会显示下面的二维码,让你用微信扫一扫验证了。

    这才刚刚开始,以后需要扫一扫的地方还很多。




    身份验证成功,可以继续了。会弹出下面的提示:


    注册成功,来到首页;如果想发布小程序的话,那是必须通过认证才可以的。我们只是看看,还是算了吧。


    如果还有其他的小伙伴和你一起体验小程序,又不想注册,你可以把他们绑定进来;


    如果只是你自己的话,那就不需要绑定了。


    通过设置》开发设置 可以生成小程序ID和小程序密钥


    注意:生成之后一定要把它们复制保存到其它位置,这里关闭后就不再显示了。


    结束语

    对开发者那么不友好,居然不支持个人身份注册。

    对于个人注册只是为了了解一下,组织信息你可以随便的填写,但这管理信息登记必须使用和你的微信一致的身份信息。

    一个身份证、一个手机号都只能注册5个小程序,珍惜着点用吧。

    虽然我们的小程序没有申请通过审核,但还是可以拿到小程序ID和小程序密钥的。

    上一篇:开发者工具下载安装及创建项目功能预览

    系列链接:【微信小程序】

    ===========文档信息============ 
    版权声明:非商用自由转载-保持署名-注明出处 
    署名(BY) :testcs_dn(微wx笑) 
    文章出处:[无知人生,记录点滴](http://blog.csdn.net/testcs_dn)

    展开全文
  • 小程序的开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。第一步:安装 首先下载微信开发者工具 ...

            小程序的开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。

    第一步:安装

            首先下载微信开发者工具

            https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716

            


    直接下载安装,点击下一步



    然后扫码进入微信公众号,他会自动获取你的公众号和微信



    扫码登录后,选择 本地小程序项目 ,点击添加项目,然后填写相关信息:



    • AppID: 企业申请后获得,或受邀参与内测的可以去微信·公众平台里查看,只是测试用的话,选择无AppID.

    • 依次填写项目名称项目目录,在第一次创建项目时,建议勾选建立普通快速启用模板选项。这会帮助创建一个初始的 demo。

    第二步:基本配置

    进入创建的初始 demo 后,可以看到如下页面:

    点击编辑后,可以发现右边目录结构中有两个文件夹以及根目录下的三个文件,三个文件分别为app.jsapp.jsonapp.wxss,以下分别介绍这三个文件的作用:

    app.js


    app.js为脚本文件,我们可以在app.js中监听并处理小程序的生命周期函数、声明全局变量以及调用各类提供的 API。如初始demo中调用登录接口以及获取数据。

    app.json


    该文件由两部分组成,我们可以在定义页面的路径,也可以在里面定义一些小程序的窗口背景色,配置导航条样式,配置默认标题。我们可以发现,这正好对应pages文件中的两个页面。如果我们要添加新的页面,也需要在这里先申明路径,“pages”数组中的一个页面为小程序的首页。


    注意:app.json中不能添加任何注释!!!


    app.wxss


    app.wxss中定义小程序的公共样式,这里申明的样式我们可以在其他的页面中直接引用。

    第三步:页面创建

    前面介绍过这个初始demo中有两个页面,微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、 index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。下面一次看一下每个文件的内容:

    index.wxml为页面结构,相当于我们写的.html文件,index.wxml.html还是存在一些区别。我们发现上述文件中的</view>标签与.html中的</div>标签很相似。其他<view/><image/><text/>标签的使用与.html中类似。

    index.js


    index.js 是页面的脚本文件,与我们之前的.js文件的功能一样。在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    index.wxss


    index.wxss为页面的样式表,类似.css。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    index.json

    页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

    第四步:调试

    点击开发框左侧的调试进入调试界面:



    调试与chrom调试代码一样

    第五步:项目预览

    开发者工具上侧的“设置--项目设置”模块中包括:当前项目细节、上传以及项目的一些其他设置。


    由于没有AppID,部分功能无法使用。

    欢迎关注我的个人技术公众号!javascript艺术



    展开全文
  • 注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 一、小程序介绍 1、小程序特点 2、小程序演示 视频地址:https://v.qq.com/x/page/w0353d7co6y.html 3、小程序为什么那么快 Page Frame Native预先额外加载一个WebView 当打开指定页面时,用默认数据直接...
  • 本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序里不免需要列表显示,有时候需要两排或者三排并列 我的想法是显示一个大view,里面再包含一个wx:for 循环,里面的cell(姑且这么叫),肯定是一个float:left。 关键是这个大的view属性该如何写, 这样写...
  • 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', })跳转到...
  • 微信小程序的布局css样式 参考自 珺L 文字 width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-weight:bold; /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1...
  • 文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他 ...
  • 微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,——微信小程序开发也就那么回事。你只需要一点点css(真的只要一点点)的基础就...
  • 都是些小程序源码,有的还有后台,适合小白、也适合学过了的、也适合做外包的,要的可以取...https://www.douban.com/group/topic/113284790/o2o微信小程序源码-专门针对o2o类别的小程序源码集合【更新整理中...】ht...
  • 微信小程序+java后台

    2018-03-21 21:30:58
    博主是大四学生,毕业设计做的是微信小程序+java后台。陆陆续续经历了三个月(因为白天要实习又碰上过年玩了一阵子),从对微信小程序一无所知到完成毕设,碰到许多问题,在跟大家分享一下自己的经历和一个小程序...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • ... 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; ... 3,页面自动刷新当前页面;... 三种实现js 刷新当前... 1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序
1 2 3 4 5 ... 20
收藏数 246,664
精华内容 98,665
关键字:

微信小程序