微信小程序_微信小程序开发 - 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-09-18 11:21:03
    本课程是一套小程序开发的入门级视频教程,也是一本着重于动手实战的编程指导教程。随着这两年小程序开发的日渐火热,无论是对于编程工作者、编程讲师或是编程爱好者与学生,掌握小程序开发技能都将为自己带来极大的...
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2020-03-26 12:29:36
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
    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或者微信,问问题秒回复等[滑稽],谢谢老铁。
    在这里插入图片描述

    展开全文
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 微信小程序实战项目——点餐系统

    万人学习 2018-10-22 21:38:06
    微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序...
  • 微信小程序开发实战

    万人学习 2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发。
  • 小程序开发中遇到的问题—汇总

    万次阅读 多人点赞 2019-11-15 15:51:16
    小程序面试题 1.bindtap和catchtap的区别是什么? bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡 2.Js数组转成换字符串,强制转换成整数及转换成浮点数的函数分别是什么? js...

     

    小程序面试题

    1. bindtap和catchtap的区别是什么?

    bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

    2. Js数组转成换字符串,强制转换成整数及转换成浮点数的函数分别是什么?

    js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

    1. 转换函数:

    在 判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的 测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。

    parseInt("1234blue"); //returns 1234 
    parseInt("0xA"); //returns 10 
    parseInt("22.5"); //returns 22 
    parseInt("blue"); //returns NaN

    2. 强制类型转换

    还可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。
    ECMAScript中可用的3种强制类型转换如下: 
    Boolean(value)——把给定的值转换成Boolean型; 
    Number(value)——把给定的值转换成数字(可以是整数或浮点数); 
    String(value)——把给定的值转换成字符串。

    3. 利用js变量弱类型转换

    举个小例子,一看,就会明白了。
    <script> 
    var str= '012.345 '; 
    var x = str-0; 
    x = x*1;
    </script>

    上例利用了js的弱类型的特点,只进行了算术运算,实现了字符串到数字的类型转换,不过这个方法还是不推荐的。

     

    3. 简单描述下微信小程序的相关文件类型

    小程序:pages ——index:index.js(页面逻辑) /index.wxml (页面结构)/index.wxss (页面样式表) / index.json (页面配置)

    App.js   小程序逻辑

    App.json  小程序公共设置

    App.wxss   小程序公共样式表

    4. 小程序有哪些参数传值的方法?

    1、设置id的方法标识跳转后传递的参数值;

    2、通过使用data - xxxx 的方法来标识要传递的值

    微信小程序设置id的方法标识来传值

    在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如:

    后我们在js的bindtap的响应事件中获取,并传递到下一个界面中;

    获取到id传的值

    通过e.currentTarget.id;获取设置的id值,并通过设置全局对象的方式来传递数值,

    获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;

    提示:其实我们也可以在,wxml中查看到我们设置的每一个item的id值

    通过使用data - xxxx 的方法标识来传值

    通过使用data - xxxx 的方法标识来传值,xxxx可以自定义取名 比如data-key等等都可以。

    如何获取data-xxxx传递的值?

    在js的bindtap的响应事件中:

    通过数据解析一层层找到数据,var id=e.target.dataset.id(根据你的data-id的取名)

    微信小程序如何跨页面获取值?

    依据上面的方式设置要传递的值,页面跳转后,我们就需要在下一个页面拿到传递的数据(这个数据在传递前,就已经被设置成全局变量

    在跳转后的js页面,接收传递过来的数据detail.js

    同样通过全局额方式取值出来,(即和app.js中取某个变量的值是一样的)

    var movieid=getApp().MovieDetailid;
    console.log(movieid);

    5. 简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别?

    微信小程序 跳转页面

    小程序页面有2种跳转,可以在wxml页面或者js中:

    1,在wxml页面中:

    <navigator url="../index/index">跳转到新页面</navigator>

    <navigator url="../index/index" open-type="redirect">在当前页打开</navigator>

    <navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>

     

    2,在js页面中:

    【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。  app.json文件中tabBar中注册过的tab页,即为“tabBar页面”,非tabBar中注册占用的页面即为“应用内的页面” 。 如下图:home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

     

    3,如果上述跳转遇到跳转失败或无效的问题,请访问下面链接:

    wx.navigateTo/wx.redirectTo 无效

    6. 如果需要用户授权,用户选择拒绝授权,此时应该如何处理?

    在微信小程序开发时,当我们调用API  wx.getUserInfo(OBJECT) 时,需要用户授权。但如果用户拒绝授权,我们如何兼容用户拒绝授权状态,拥有更好的用户体验呢?

    先看看这个接口的官方文档:

    wx.getUserInfo(OBJECT)

    获取用户信息,需要先调用 wx.login 接口。

    OBJECT参数说明:

    参数名

    类型

    必填

    说明

    withCredentials

    Boolean

    是否带上登录态信息

    success

    Function

    接口调用成功的回调函数

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    1. tipwx.getUserInfo 接口需要用户授权,请兼容用户拒绝授权的场景。

    我们就是要在用户点击拒绝的时候,弹出提示框,提示用户以提升用户体验。像下面这样的。

    用具体代码实现就是,将弹窗写在 wx.getUserInfo 的fail回调函数中,像下面这样:

    wx.getUserInfo({

    success: function (resuser) {

    console.log(success)

    },

    fail: function () {// 调用微信弹窗接口

    wx.showModal({

    title: '警告',

    content: '您点击了拒绝授权,将无法正常使用******的功能体验。请10分钟后再次点击授权,或者删除小程序重新进入。',

    success: function (res) {

    if (res.confirm) {

    console.log('用户点击确定')

    }

    }

    })

    }

    })

    这样用户就获得了提示信息,但此时,用户还是停留在页面的,如果某些展示信息,还是给要给用户展示的,只是在进行某些操作的时候要对授权进行验证的话,那就得继续修改我们的代码,保存用户的登录态,在其他地方做验证使用。

    第一种思路:

    保存登录态这里是这样的,将用户的登录信息传给后台,后台保存用户信息,同时用 open_id 在后台换取一个SessionId  用换取的这个SessionId 存在缓存,做为登录态验证。

    wx.getUserInfo({

    success: function (resuser) {

    let userInfo = resuser.userInfo

    that.healthApi.login(code, userInfo).then(logindata => {   // 这里将微信的请求封装成Promiese 风格

    if (logindata.code === 0) {

    var sessionId = logindata.data// 调用微信wechat.setStorage将换回来的 SessionId 存在本地缓存

    that.wechat.setStorage('sessionId', sessionId).then(() => {

    that.globalData.userInfo = userInfo

    typeof cb == "function" && cb(that.globalData.userInfo)

    })

    }

    })

    },

    fail: function () {

    wx.showModal({

    title: '警告',

    content: '您点击了拒绝授权,将无法正常使用*****的功能体验。请10分钟后再次点击授权,或者删除小程序重新进入。',

    success: function (res) {

    if (res.confirm) {

    console.log('用户点击确定')

    }

    }

    })

    }

    })

    这样我们将登录态保存在了 SessionId 中,在每次登录的时候我们只需要再调用一个 检查 SessionId的接口就行,检查不通过再调微信登录接口。此处不做延伸了。

    第二种思路:

    在3.29微信小程序更新的版本中,加入了这样一条属性

    withCredentials 字段基础库版本 1.1.0 开始支持,低版本需做兼容处理

    这个字段的意思就是调用 wx.getUserInfo(OBJECT) 是否带上 登录态  的信息。

    官方文档是这样解释的:

    withCredentials 字段基础库版本 1.1.0 开始支持,低版本需做兼容处理

    注:当 withCredentials 为 true 时,要求此前有调用过 wx.login 且登录态尚未过期,此时返回的数据会包含 encryptedData, iv 等敏感信息;当 withCredentials 为 false 时,不要求有登录态,返回的数据不包含 encryptedData, iv 等敏感信息。

    success返回参数说明:

    参数

    类型

    说明

    userInfo

    OBJECT

    用户信息对象,不包含 openid 等敏感信息

    rawData

    String

    不包括敏感信息的原始数据字符串,用于计算签名。

    signature

    String

    使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息。

    encryptedData

    String

    包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法

    iv

    String

    加密算法的初始向量,详细见加密数据解密算法

    注:需要兼容微信低版本,向后兼容

    那么利用这个接口,我们可以直接拿到 登录状态,在其他需要验证登录的地方进行提示,而在不需要授权的地方还可以让用户浏览小程序。

    回到前面的问题,在用户点击拒绝授权后,在某些操作时需要验证用户是否授权过,弹出交互信息,那么就利用上面的 SessionId或者 withCredentials 登录态进行下面的操作:

    applyIn: function applyIn() {

    if (wx.getStorageSync('sessionId')) {  // 根据储存的sessionId 进行验证

    wx.navigateTo({

    url: 'familyDoctorApply/familyDoctorApply?Oid=' + this.data.params.Oid + '&title=' + this.data.params.title + '&serviceCity=' + this.data.array[this.data.index].name + '&productPrice=' + this.data.product.productPrice

    });

    } else {

    wx.showModal({

    title: '警告',

    content: '您点击了拒绝授权,无法使用此功能。',

    success: function (res) {

    if (res.confirm) {

    console.log('用户点击确定')

    }

    }

    })

    }

    效果像这样:

    这样一个简单完整的登录及授权,登录态保存等前端微信小程序解决方案就完成了,还可以继续扩展到登录有效期,退出登录,用户权限等跟多扩展的地方。

    7. 你平时封装可以复用的方法吗?你会把可以复用的方法写在哪个文件里?

    其实可以模拟一些框架的,比如bootsrap,写个demo出来,抽出css和js,js最好抽象成对象(构造函数)或者是带参数的方法,然后你只要声明对像,或者参数指定某个class或id,就可以了

    写在html文件里有什么优点吗?
    独立出来会有什么问题吗?尤其是载入页面的时候,应该会多发很多http请求吧,会不会造成加载变慢?

    8. 分析下小程序的优劣势?

    小程序是在微信生态发展过程中新出现的一种应用形态,小程序的小,从某种程度上已经说明了它的体量不会很大,但是可以实现一些功能相对简单、交互相对简单的服务需求,同时解决了App长期以来多平台适配、多应用市场分发、开发成本居高不下等诸多方面的问题。所以小程序【密件】依靠微信平台和自身“阅后即焚”的功能,获得众多年轻人的好评

    优势:

    1)容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本上没有大问题;当然如果了解ES6+CSS3则完全可以编写出即精简又动感的小程序;

    2)基本上不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序;

    3)基本组件库已经比较齐全:Toast,Loading框,Picker,定位及地图,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的组件都有,而且使用也挺简单、方便;

    4)发布、审核高效,基本上上午发布审核,下午就审核通过,升级简单,而且支持灰度发布;

    5 ) 微信官方提供使用人数、频率等数据统计,小程序js脚本执行错误日志;

    6)开发文档比较完善,开发社区比较活跃;

    7)最近刚开放的牛x功能,新增webview组件,可以展示网页啦,这个比较爽;

    8)支持插件式开发,一些基本功能可以开发成插件,供多个小程序调用;

    劣势:

    1)后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦。

    2)前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致(之前碰到一个案例,后续单独讲解)

    3)真机测试,个别功能安卓和苹果表现迥异,我们的小程序里有很多页面有定位功能,模拟器和iphone定位瞬间完成,然而安卓手机就蛋疼了,老显示“定位中...”要很久才能定位好。后来没办法只能优化,减少定位次数。

    4)native组件,展示很不好,比如textarea,不能在滚动页面出现,而且至于顶层,经常其它组件会被它遮挡,点击其它组件时,就进入textarea输入框;画布组件也是如此;

    5)页面跳转深度不能超过5个页面,这个比较麻烦,有些复杂的页面跳转没法实现,不过太复杂的话也有悖小程序简单易用的原则啦;

    6)小程序升级问题,官方文档说会自动更新,实际情况往往是要先把原来的小程序删除掉,重新搜索添加,才能加载最新版本;

    7)页面渲染稳定性有待提高,已经好几次出现部分用户的页面显示异常,整个页面被放大了好几倍,先删除原来小程序再添加回来,如此重复好几次,才能显示正常;

    8)js引用只能使用绝对路径,很蛋疼;基于安全性及MINA框架实现原理,小程序中对js使用做了很多限制,不能使用:new Function,eval,Generator,不能操作cookie,不能操作DOM;

    9)开发工具bug比较多且效率比较低,三天两头升级,解决老问题的同时又出现问题;文件查找、资源定位、代码编辑较eclipse有一定差距。经常出现把a.js当做b.js来修改

    9. 设置值到页面暂存区(即data)里面的方法有几种?分别是什么?有什么区别?

    1. 使用QueryString变量
        QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中。如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法。但是对于传递数组或对象的话,就不能用这个方法了。下面是一个例子:
    a.aspx的C#代码
    private void Button1_Click(object sender, System.EventArgs e)
    {
     string s_url;
     s_url = "b.aspx?name=" + Label1.Text;
     Response.Redirect(s_url);
    }

    b.aspx中C#代码
    private void Page_Load(object sender, EventArgs e)
    {
     Label2.Text = Request.QueryString["name"];
    }

      2. 使用Application 对象变量
        Application对象的作用范围是整个全局,也就是说对所有用户都有效。其常用的方法用Lock和UnLock。
    a.aspx的C#代码
    private void Button1_Click(object sender, System.EventArgs e)
    {
     Application["name"] = Label1.Text;
     Server.Transfer("b.aspx");
    }

    b.aspx中C#代码
    private void Page_Load(object sender, EventArgs e)
    {
     string name;
     Application.Lock();
     name = Application["name"].ToString();
     Application.UnLock();
    }

      3. 使用Session变量
        想必这个肯定是大家使用中最常见的用法了,其操作与Application类似,作用于用户个人,所以,过量的存储会导致服务器内存资源的耗尽。
    a.aspx的C#代码
    private void Button1_Click(object sender, System.EventArgs e)
    {
     Session["name"] = Label.Text;
    }

    b.aspx中C#代码
    private void Page_Load(object sender, EventArgs e)
    {
     string name;
     name = Session["name"].ToString();
    }

      4. 使用Cookie对象变量
        这个也是大家常使用的方法,与Session一样,其是什对每一个用户而言的,但是有个本质的区别,即Cookie是存放在客户端的,而session是存放在服务器端的。而且Cookie的使用要配合ASP.NET内置对象Request来使用。

    a.aspx的C#代码
    private void Button1_Click(object sender, System.EventArgs e)
    {
     HttpCookie cookie_name = new HttpCookie("name");
     cookie_name.Value = Label1.Text;
     Reponse.AppendCookie(cookie_name);
     Server.Transfer("b.aspx");
    }

    b.aspx中C#代码
    private void Page_Load(object sender, EventArgs e)
    {
     string name;
     name = Request.Cookie["name"].Value.ToString();
    }

      5. 使用Server.Transfer方法
        这个才可以说是面象对象开发所使用的方法,其使用Server.Transfer方法把流程从当前页面引导到另一个页面中,新的页面使用前一个页面的应答流,所以这个方法是完全面象对象的,简洁有效。
    a.aspx的C#代码
    public string Name
    {
     get{ return Label1.Text;}
    }
    private void Button1_Click(object sender, System.EventArgs e)
    {
     Server.Transfer("b.aspx");
    }

    b.aspx中C#代码
    private void Page_Load(object sender, EventArgs e)
    {
     a newWeb; //实例a窗体
     newWeb = (source)Context.Handler;
     string name;
     name = newWeb.Name;
    }

     

    微信小程序--data的赋值与取值

    通过小程序官方文档可知:

    Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data。

    所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。

    · 页面js文件中这么写:

    Page({

      data: {

        message: 'Hello MINA!'

      }

    })

    · wxml中这么写:

    <view> {{ message }} </view>

    · 如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,写法如下:

    function setData(){

        var that = this;

        that.setData({

          message: '新消息'

        })

    }

    · 如果想在js文件中使用data中的数据写法如下:

    function getData(){

        var that = this;

        console.log(that.data.message)

    }

     

    10. 如何检测用户的微信版本是否支持某项功能?

    第一期开放的接口,不是不能使用,而是无需检测,全部都是支持的。
    只有后面最新开放的一些接口,才需要检测是否支持。
    目前开放的所有接口:
    onMenuShareTimeline
    onMenuShareAppMessage
    onMenuShareQQ
    onMenuShareWeibo
    onMenuShareQZone
    startRecord
    stopRecord
    onVoiceRecordEnd
    playVoice
    pauseVoice
    stopVoice
    onVoicePlayEnd
    uploadVoice
    downloadVoice
    chooseImage
    previewImage
    uploadImage
    downloadImage
    translateVoice
    getNetworkType
    openLocation
    getLocation
    hideOptionMenu
    showOptionMenu
    hideMenuItems
    showMenuItems
    hideAllNonBaseMenuItem
    showAllNonBaseMenuItem
    closeWindow
    scanQRCode
    chooseWXPay
    openProductSpecificView
    addCard
    chooseCard
    openCard

     

    11. 如何分包加载?分包加载的优势在哪?

    分包加载的介绍
          大部分小程序都会由某几个功能组成,通常这几个功能之间是独立的,但会依赖一些公共的逻辑,并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包,大可不必一定要打成一个,可以按照功能的划分,拆分成几个分包,当需要用到某个功能时,才加载这个功能对应的分包。
    对于用户来说,小程序加载流程变成了:
    1.首次启动时,先下载小程序主包,显示主包内的页面;
    2.如果用户进入了某个分包的页面,再下载这个对应分包,下载完毕后,显示分包的页面。
    采用分包加载,对开发者而言,能使小程序有更大的代码体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能。
    分包的划分
    在配置前首先需要开发者规划下各个分包需要容纳的内容,我们建议开发者按照功能划分的的原则,将同一个功能下的页面和逻辑放置于同一个目录下,对于一些跨功能之间公共逻辑,将其放置于主包下,这样可以确保在分包引用这部分功能时,这部分的逻辑一定存在。
    在分包划分时,应该注意以下事项:
    1.避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的,并不能确保某分包加载时,另外一个分包就一定存在,这个时候可能会导致 JS 逻辑异常的情况,例如报「"xxx.js" is not defined」这样的错误;
    2.一些公共用到的自定义组件,需要放在主包内。
    分包的配置
          当理清了分包的划分后,就可以进行分包的配置了,这一步并不复杂。

          假设支持分包的小程序目录结构如下:

     

         开发者通过在 app.json subPackages 字段声明项目分包结构:

    分包加载的低版本兼容问题
       微信 6.6.0 版本开始支持分包加载,而对于低于这个版本的客户端,我们做了兼容处理,开发者不需要对老版本微信客户端做兼容。对于老版本的客户端,编译后台会将所有的分包打包成一个整包,老版本的客户端依然按照整包的方式进行加载。
    所以在老版本的微信客户端下,是依然采取整包加载的方式加载的,建议开发者尽量控制代码包的大小。
    目前小程序分包大小的限制:
        整个小程序所有分包大小不超过 4M
        单个分包/主包大小不能超过 2M
       随着时间推移,老版本覆盖率降低,我们会考虑进一步扩大代码包的大小。

     

    12. 在你开发小程序的过程中遇到过什么坑? 你是怎么解决的?

    1.我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 的时候在pages中写注释的时候回报错。 
    例如:

    {

      "pages":[

          //这是首页面

        "pages/welcome/welcome"

      ]}

    此时就会报错 


    2.在json文件中没有写内容的时候也要加一对大括号{ },不然的话也会报错 
     
    3. ①在开发微信小程序的时候,我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多Tab等。 
    以下是一个包含了所有配置选项的简单配置,app.json :

    {

      //设置页面路径

      "pages": [

        "pages/index/index",

        "pages/logs/index"

      ],

      //设置默认页面的窗口表现

      "window": {

        "navigationBarTitleText": "Demo"

      },

      //设置底部 tab 的表现

      "tabBar": {

        "list": [{

          "pagePath": "pages/index/index",

          "text": "首页"

        }, {

          "pagePath": "pages/logs/logs",

          "text": "日志"

        }]

      },

      //设置网络超时时间

      "networkTimeout": {

        "request": 10000,

        "downloadFile": 10000

      },

      //设置是否开启 debug 模式

      "debug": true

    }

    ②但是在对页面json文件进行配置的时候只可以配置设置默认页面的窗口表现(即只能对window进行配置),但是在此时可以直接省略window,如果加window则没有效果,也不会报错。 
    以下是一个包含了window配置选项的简单配置,post.json :

    注意:这是错误的写法

    {

      "window":{

        "navigationBarBackgroundColor": "#ffffff",

        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "微信接口功能演示",

        "backgroundColor": "#eeeeee",

        "backgroundTextStyle": "light"

      }}

    注意:正确的写法

    {

        "navigationBarBackgroundColor": "#ffffff",

        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "微信接口功能演示",

        "backgroundColor": "#eeeeee",

        "backgroundTextStyle": "light"}

    4.此前一直没有注意vertical-align: middle和height:40rpx;line-height:40rpx进行设置垂直剧中的区别,这次主要说一下vertical-align: middle 
    代码如下:

    <view class="post-author-date">

        <image class="post-author" src="../../images/avatar/1.png">

        </image>

        <text class="post-date">Nov 15 2016</text>

    </view>

     

    .post-author{

        width: 60rpx;

        height: 60rpx;

        vertical-align: middle;

    }

    .post-date{

        margin-top: 5rpx;

        vertical-align: middle;

        /*height: 40rpx;

        line-height: 40rpx;*/

    }

    总结: 
    ①vertical-align: middle;把此元素放在父元素的中部 
    ②当一个父元素里面有多个子元素,需要把几个子元素水平对齐,并且每个子元素都垂直剧中的时候,对每一个子元素进行设置 vertical-align: middle 
    ③height: 40rpx; line-height: 40rpx;可以对文本进行垂直居中

     

    最后为了方便大家的沟通与交流请加QQ群: 625787746

    展开全文
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕...

    wx-gesture-lock 微信小程序的手势密码
    在这里插入图片描述
    WXCustomSwitch 微信小程序自定义 Switch 组件模板
    在这里插入图片描述
    WeixinAppBdNovel 微信小程序demo:百度小说搜索
    在这里插入图片描述
    shitoujiandaobu 小程序:石头剪刀布(附代码说明)
    在这里插入图片描述
    audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    star 微信小程序开发之五星评分
    在这里插入图片描述
    switchCity 微信小程序开发之城市选择器 城市切换
    在这里插入图片描述
    huadong_del 微信小程序滑动删除效果
    在这里插入图片描述
    jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单
    在这里插入图片描述
    xiaoxiaoxiao_lazyload 实现微信小程序图片懒加载特效
    在这里插入图片描述
    kangaiduowei 微信小程序:康爱多微商城:学习界面设计
    在这里插入图片描述
    在这里插入图片描述
    tianmao_dazhuanpan 小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)
    在这里插入图片描述
    weapp-meirong 微信小程序学习用demo推荐:美容商城;列表,预约
    在这里插入图片描述
    baisi 微信小程序仿百思不得姐
    在这里插入图片描述
    weapp-one 仿 「ONE · 一个」 的微信小程序

    netmusic-app 仿网易云音乐APP的微信小程序
    在这里插入图片描述
    a_takeaway 微信小程序的外卖demo
    在这里插入图片描述
    sideslip 微信小程序『侧边栏滑动』特效
    在这里插入图片描述
    wx_plo 微信小程序之仿微信漂流瓶

    kwonWhere 微信小程序-知亦行
    在这里插入图片描述

    wxChart 微信小程序图标插件
    在这里插入图片描述
    guoku 微信小程序-果库
    在这里插入图片描述
    snake 微信小程序-贪吃蛇小程序
    在这里插入图片描述
    douban_movie 微信小程序-仿豆瓣电影
    在这里插入图片描述
    RecordDemo 麦克风动画
    在这里插入图片描述
    shishanggou 实现了包括常用组件,ajax获取数据,模板使用,路由等的使用,下拉刷新数据;
    在这里插入图片描述
    jiajuzaixian 家具在线-演示如何使用下拉选项
    在这里插入图片描述
    wechat-app-ipinbb 爱拼宝宝-功能非常全的电商应用
    在这里插入图片描述
    TodayNews-wx 微信小程序-今日头条
    在这里插入图片描述
    WXNative-bpgg 奔跑果果-微信小程序
    在这里插入图片描述
    wechatapp-demo 是目前我发现的,实现实用功能较多的demo,推荐大家学习研究
    在这里插入图片描述
    weapp-MatterAssistant 微信小程序-事项助手

    weapp-wymusic 微信小程序 仿网易云音乐

    weapp-wechat-nearby 微信小程序-仿找事吧app附近三公里

    bs 精简版百思不得姐
    在这里插入图片描述
    WXBaiSi 微信小程序版 百思不得姐

    weapp-demo-breadtrip 基于面包旅行 API 制作的微信小程序示例

    html-to-wxml 小程序中将html内容转化成wxml可以显示的内容,方便用于小程序中显示

    kachezhijia 自卡车之家,有丰富的卡车司机和物流园区的资源,所以这个小程序可以说也是他们未来工作上的一个必将实施的项目。

    WxEmojiView 微信小程序Emoji展示输入组件alpha 0.1

    GankCamp-WechatAPP gank.io (干货集中营) 微信小程序 版本

    wechat-JD 微信小程序仿京东首页

    wechat-turntalbe-canvas 用微信小程序开发的Canvas绘制可配置的转盘抽奖。

    mangguoTv 微信小应用-小程序-demo-仿芒果TV

    wxreading 微信小程序跟读

    WeChatMeiZhi 微信小程序版妹纸图 API from gank.io

    CountDown 微信小程序倒计时组件

    weapp-github 微信小程序–github

    wechat-weapp-mapdemo 微信小程序开发demo-地图定位,非常简单的demo,只为了解一下微信小程序

    wechat-cnode 微信小程序 cnode社区版

    weapp-newsapp 微信小程序-公众号热门文章信息流

    wechat-weapp-taobao 微信小程序demo 仿手机淘宝
    在这里插入图片描述
    timer 番茄时钟微信小程序版

    wechat-app-music 微信小程序:音乐播放器 技术栈: redux + es7 +labrador

    fenda-mock 使用微信小程序实现「分答」这款APP的基础功能

    Wa-UI 针对微信小程序整合的一套UI库

    wx-query 微信小程序 仿jQuery插件

    weapp-artand 微信小程序 Artand

    WeiXin-SmallApps-Information 微信小程序-仿今日头条

    weapp-wechat-zhihu 微信中的知乎–微信小程序

    WeApp 基于微信小程序开发的仿微信demo

    SmallApp 微信小程序

    wechat-v2ex 微信小程序-v2ex

    weipiao 微信小程序-微票

    DouBanBookApp 微信小程序之小豆瓣图书

    wxapp-calc 一个简单的微信小程序-简易计算器

    weapp-wechat-zhihu 模仿知乎的小程序

    wx-movies-demo 小程序–影讯

    caiquan 微信小应用,猜拳小游戏

    hayeah-wxapp-Breakfast 小林早厨微信小程序

    AppleMusic 微信小程序,仿Apple Music

    cnode_wechat-webapp 用cnode社区api做的微信小应用

    shoppingcar 一个点餐、购物的购物车效果

    wechat-weapp-mall 微信小程序实现移动端商城

    SmallAppForQQ 高仿手机QQ应用程序
    在这里插入图片描述
    zhihudaily 微信小程序-知乎日报

    wechat-weapp-gank 微信小程序-干货投稿应用

    TeamToy 调用TeamToy API 的微信小程序 Demo

    douban 微信小程序(应用号)示例教程(豆瓣电影)
    在这里插入图片描述

    浏览网页时发现有一篇博客不错,这里做了调整,共勉!

    转载请注明出处!

    展开全文
  • 作者:要和代码过一辈子 来源:CSDN ...版权声明:本文为博主原创文章,转载请附上博文链接!...大部分小程序都会有几个功能组成,通常独立,但是会有公共的逻辑,并且这些功能通常会对应几个独立的页...
  • 最全的微信小程序代码大全

    万次阅读 多人点赞 2017-12-21 15:10:20
    微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)微信小程序(应用号)示例...
  • 【AI番外】微信小程序前后端开发

    千次阅读 2019-04-15 23:36:35
    部署到线上现在最轻便且最方便传播的当属微信小程序了,微信小程序依托于微信,不需要下载安装即可使用,用户扫一扫或搜一下即可打开应用。 腾讯官方已经宣布微信小程序的数量超过了app,对于我们个人来...
  • 微信小程序(2) 按钮点击跳转页面

    万次阅读 多人点赞 2019-03-29 14:08:36
    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', })跳转到...
  • 微信小程序开发问题汇总样式如何使用变量video遮罩问题弹幕自动上推信息流软键盘问题 样式如何使用变量 在wxss中,定义变量:width:var(–width–); 在js中,定义变量:viewWidth,并给这个变量赋予想要的值 在wxml...
  • 微信小程序

    2020-09-15 15:28:08
    微信小程序 代码的构成 json :配置文件,以json格式存储- -些配置 .wxml :模板文件,描述页面结构,相当于HTML .WXSS :样式文件,调整页面样式,相当于css .js :脚本逻辑文件,页面和用户的交互逻辑 json文件 project....
  • 获取到json中的数据,通过“\n”转义,此时我们需要通过正则表达式来替换一下 replace(/↵/g, ‘\n’); 在页面中可以这样 我长得好看 \n 我长得也好看 出来的结果就是 我长得好看 我长得也好看 ...
  • 近期热门微信小程序demo源码下载汇总(17/12.1-7)

    万次阅读 多人点赞 2018-02-05 09:45:45
    最新:热门微信小程序demo源码下载汇总(17/12.8-15) 热门微信小程序demo源码下载汇总(17/12.1-7),乃小程序学习分析必备资源!点击标题可直接跳转至下载: 新手必看: 开发者工具如何快速导入小程序demo...
  • 近期微信小程序demo源码下载汇总,乃居家旅行学习分析必备良品!点击标题可直接跳转至下载。帖子最下方可点击收藏 (微信小程序版本)可以在移动端阅读的git book 乐空空微信小程序版本 微信小程序案例:仿...
  • 史上最全的微信小程序代码大全

    万次阅读 多人点赞 2017-01-14 22:25:08
    微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)微信小程序(应用号)示例...
  • 微信小程序、微信小游戏作品汇总合集,各种好玩的小程序小程序:微信小程序:易阅小程序作品展示微信小程序:幸福磁县小程序作品展示微信小程序:小说精品榜小程序作品展示微信小程序:武汉智慧交警小程序作品展示...
  • 微信小程序教程系列

    万次阅读 多人点赞 2017-08-30 17:49:50
    微信小程序教程系列
  • 设置标题栏 设置导航栏
1 2 3 4 5 ... 20
收藏数 253,423
精华内容 101,369
关键字:

微信小程序