微信小程序_微信小程序开发 - 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基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发。
  • 更新微信小程序版本 更新Vue后台 从Github更新本地代码 这是多人协作的项目,先将代码git到本地,然后自己负责的部分需要改动的,进行修改。 常用使用命令 git checkout master git stash git pull git ...

    目录

     

    从Github更新本地代码

    更新node服务器版本

    更新服务器数据库

    更新微信小程序版本

    更新Vue后台


    从Github更新本地代码

    这是多人协作的项目,先将代码git到本地,然后自己负责的部分需要改动的,进行修改。

    常用使用命令

    git checkout master

    git stash

    git pull

    git stash pop

    更新node服务器版本

    如果有数据库的变动,在服务器上需要重新执行.sql文件,生成新的数据库。所用到的.sql文件我放在项目目录中,因此本地数据库变动时,需要导出.sql文件,然后放到如下图所示的项目目录:

     

    代码更改之后,更新github版本。

    打开putty,连接服务器。

     

    登录到服务器之后,如果安装了nvm,最好先把npm版本选好

     

    我在项目中是在管理员用户下启动项目,所以保证在管理员下。

     

    然后切换到项目目录,从github拉取项目代码。

     

    代码拉取成功后,如果需要更改数据库配置文件,则进行更改。

     

    查看pm2中运行的程序

     

    删除以及运行的node服务器程序,本项目是图中第二个,然后重新运行项目

     

    更新服务器数据库

    如果有数据库表结构的变动,则执行本节步骤,否则可以跳过。

    常用命令行数据库命令:

    mysql -u root -p

    show tables;

    Drop databases XXX;

    Create database XXX;

    use XXX;

    show tables;

    source XXX.sql;

     

    更新微信小程序版本

    首先检查小程序代码是否需要更改。然后push更改后的代码到github。之后在微信开发者工具进行体验版小程序的上传。

     

    更新Vue后台

    同样的,首先pull代码之后,需要确认是否需要修改代码。

    更改API地址为线上服务器

     

    然后对后台程序进行打包

    npm run build:prod

    打包成功之后,会生成一个dist目录,将这个目录替换的服务器项目目录中的dist。我在这儿用了WinSCP这个可视化工具,因此可以直接将文件夹拖到服务器目录中。

    注意:服务器中的项目目录并不是远后台项目,而是仅仅包含dist文件夹以及package.json文件,以及一个主js文件的目录。

     

    接着重启pm2中的后台项目

     

    展开全文
  • 内容:一、前言二、相关概念三、开始工作四、启动项目起来五、项目结构六...微信小程序自从2017年,被各种看好,不过一段时间过去了还是反响平平,下半年随着各项功能的开放,很多企业陆续接入了小程序,我觉得就算...

    内容:

    一、前言

    二、相关概念

    三、开始工作

    四、启动项目起来

    五、项目结构

    六、设计理念

    七、路由

    八、部署线上后端服务

    同步交流学习社区: www.mwcxs.top/page/440

    源码地址:github.com/saucxs/wx_p…


    一、前言(坑爹的玩意)

    微信小程序自从2017年,被各种看好,不过一段时间过去了还是反响平平,下半年随着各项功能的开放,很多企业陆续接入了小程序,我觉得就算是坑,咱们也得踩踩。不然怎么从微信这个大流量体系中推广引流。

    小程序内部可以理解成一个mvvm的框架,分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

    最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试入门练手项目--通讯录(phoneBook)(JavaScript和node.js基础即可,微信推荐使用的语言,去菜鸟教程简单学习下 JavaScript,node.js,mysql,nginx即可),方便大家学习。

    二、相关概念

    官方解释:微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。可以理解成一套嵌套在微信里面的app,和原生app不同的是不需要下载,属于小而轻的应用。

    三、开始工作

    1、本地koa后台服务部署

    可以参考快速新建简单的koa2后端服务 这篇文章,教会你快递建立简单的koa后端服务。

    2、准备注册等工作

    (1)注册账号

    (2)下载开发者工具, 下载1.02.x这个版本的,最新版的有bug,编译的时候调试器Wxml窗口会出现空的page标签,里面没有内容。

    (3)注册好后登录下微信公众平台|小程序,在设置里找到开发设置,把appID保存下来,一会开发的时候需要用到

    四、启动项目起来

    1、此时,工具有了,ID有了,接下来开始我们的撸码之旅。

    打开开发者工具,扫码登录后选择小程序项目,点击右下角的加号,创建新项目,选择项目目录,填写appID,项目名称,写好后点击确定。

    2、确定以后,默认打开后,发现给我们创建了一些代码。

    3、设置不校验合法域名

    这个设置是本地开发换环境下,进行开发调试的,必须勾上。

    4、运行起来了

    五、项目结构

    我们主要看app.js、app.json、app.wxss三个文件和pages文件夹里面的wxml

    1、app.js做为小程序的入口,里面有个App实例,每个小程序只会有一个App实例,小程序启动以后触发onLaunch函数执行,获取用户信息

    2、app.json是小程序的所有全局配置,pages字段放置所有页面的路径,window字段定义所有页面的顶部背景颜色,文字颜色 详细配置请戳这里?

    3、app.wxss文件就是页面公用的样式,仅支持部分css选择器

    4、wxml就是我们的HTML文件,常用标签为 view 、text 等,没有所谓的div、span、p一类的标签了,我们习惯称它们为组件

    六、设计理念

    1、小程序可以理解成一个mvvm的框架

    分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

    // pages/login/login.js
    const app = getApp();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        phone: '',
        password: '',
        isError: false,
        errorText: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 输入手机号
       */
      bindPhoneInput: function(item){
        this.setData({
          phone: item.detail.value
        })
      },
      
        /**
       * 输入密码
       */
      bindPasswordInput: function (item) {
        this.setData({
          password: item.detail.value
        })
      },
    
    
      /**
     * 点击登录按钮
     */
      login: function (item) {
        if(this.data.phone === '' || this.data.password === ''){
          this.setData({
            isError: true,
            errorText: "手机号码或密码不能为空"
          })
          return;
        }
        let that = this;
        wx.request({
          url: `${app.globalData.apiUrl}/login`,
          data: {
            phone: this.data.phone,
            password: this.data.password
          },
          method: "POST",
          success: function(res){
            if(res.data.success){
              wx.setStorageSync("USERID", res.data.userID);
              wx.switchTab({
                url: '/pages/department/department',
              });
            }else{
              that.setData({
                isError: true,
                errorText: "请输入正确的手机号码或密码"
              })
            }
          },
          fail: function(item){
            console.log(item)
          },
          complete: function(item){
            console.log(item)
          }
        })
      },复制代码

    使用Page函数来注册一个页面,接收一个Object参数。

    这里我们使用了onLoad来监听页面的加载,

    定义了一个输入手机号bindPhoneInput函数 ,并使用setData函数将text的值进行更改,

    定义一个输入密码bindPasswordInput函数,并使用setData函数将text的值进行更改,

    定义一个登陆按钮login函数,通过wx.request方法请求后端服务接口,通过wx.setStorageSync方法将请求的结果加入到storage中,通过wx.switchTab方法跳转到相应的路由。

    <!--pages/login/login.wxml-->
    <view class="container">
      <view class="login-container">
        <text class="app-title">系统</text>
        <form class="login-form">
          <view class="section">
            <input name="phone" type="number" bindinput="bindPhoneInput" maxlength="11" placeholder="手机号码" />
          </view>
          <view class="section">
            <input name="password" bindinput='bindPasswordInput' type="password" password="true" placeholder="密码" />
          </view>
          <text class="{{ isError ? 'error' : ''}}">{{errorText}}</text>
        </form>
        <view class="section">
          <button bindtap="login">立即登录</button>
        </view>
      </view>
    </view>复制代码

    更改data数据的时候必须调用setData函数进行更改,我们在button组件上添加了点击事件,调用了login函数。

    相应的事件可以参考官方文档:developers.weixin.qq.com/miniprogram…

    2、传递参数

    有时候我们需要触发事件的时候,传递一些参数,那小程序怎么传递呢?很不幸,小程序不能类似js里面直接传递,往往我们需要将传递的数据绑定到事件元素上。

    // index.wxml
    <button data-test="哈哈"  bindtap="change">点击我</button>
    使用e.currentTarget.dataset来获取值
    // index.js
    change(e){
      e.currentTarget.dataset.test  // 哈哈
    }复制代码

    七、路由

    小程序里面所有的页面路由由框架进行管理

    我们可以使用getCurrnetPages函数获取当前页面栈的实例,返回一个数组, 最后一个元素为当前页面

    小程序定义了五个用于导航跳转的API,这里列举两个常用的

    1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面

    wx.navigateTo({url:`/pages/text/index?text=${saucxs}`})复制代码

    2、wx.redirectTo 关闭当前页面,跳转到应用内的某个页面

    wx.navigateTo({url:`/pages/text/index?text=${saucxs }`})复制代码

    通过上面的API跳转带的参数,在页面上我们需要怎么获取呢?

    // text.js
    Page({
      data:{
         ... // 页面数据
      },
      onLoad(options){
        console.log(options.text)  // saucxs 获取上个页面带过来的值
      }
    })复制代码

    (一)数据过滤 过滤器

    如果你使用过vue、angular框架,对|管道符肯定不陌生,它用来对我们的数据进行转换,那小程序里面有没有过滤器呢,不过这个是真没有。

    但是目前有两种方法,可以实现过滤。

    1、获取数据的时候,直接改了,干脆利落、好不优雅。

    2、使用最后我们要介绍的wxs

    (二)WXS

    WXS是小程序的一套脚本语言,首先和js是不同的语言,其次运行环境和js也是隔离开的,wxs不能调用js文件中的函数,也不能调用小程序的API,它主要用来增强wxml。

    wxs不能使用es6语法,接下来我们来实现一个使用wxs实现一个简单的过滤器。

    1、首先我们创建filter.wxs文件并写入以下内容

    // filter.wxs
    var Filter = {
      getSatusStr: function(num){
        var str = '';
        switch (num) {
          case 0:
            string = '待支付'
            break;
          case 1:
            string = '已支付'
            break;
          default:
            string = '待发货'
            break;
        }
        return str
      }
    }
    module.exports = {
      status: Filter.getSatusStr
    }复制代码

    同级下index.wxml使用

    <wxs module="filter" src="./filter.wxs"></wxs> 
    <view wx:for="{{list}}">
      <view>{{filter.status(item.status)}}</view>  
    </view>复制代码

    总结:

    1、每个wxs标签都有一个module 属性

    2、wxs可以写在wxml里面的wxs标签里和.wxs文件里

    3、wxs文件中引入其他wxs文件时候,可以使用require函数,接受相对路径

    4、在wxml标签里使用外部wxs文件的时候,src属性是相对路径。

    八、部署线上后端服务

    微信小程序搭建环境必需的两点:云服务器,域名,下面给搭建演示如果在一台阿里云服务器上搭建微信小程序服务端环境。

    (一)准备好将http转成https

    可以参考这篇阿里云免费购买SSL证书,nginx无缝升级https:www.mwcxs.top/page/434.ht…

    参考主要是申请和解析域名,以及将nginx的http跳转到https。

    (二)线上部署koa后台服务

    1、修改mysql配置

    const pool = mysql.createPool({
      host: 'xx.xx.xx.xx',
      port: '3306',
      user: 'root',
      password: 'xxxxxxxxx',
      database: 'wx_contactsadmin',
      connectionLimit: 100
    })复制代码

    host使用你的服务器外网IP,user数据库用户名,密码,以及数据库名称。

    2、修改请求后端的url

    在app.js

    globalData: {
        userInfo: null,
        // apiUrl: 'http://localhost:8000/contact'
        apiUrl: 'https://phonebook.mwcxs.top/contact'
      }复制代码

    3、使用pm2管理koa的服务

    4、本地修改设置不校验合法域名

    去掉不校验合法域名的勾选


    展开全文
  • 微信小程序(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....
  • 微信小程序实例系列

    万次阅读 多人点赞 2019-03-19 16:44:10
    微信小程序实现部分高德地图功能的DEMO下载 微信小程序实现MUI的部分效果的DEMO下载 更多微信小程序实例 GIT GIT地址 https://github.com/Rattenking/WXTUI-DEMO GIT下载 ...
  • 微信小程序之授权登录(附完整源码)

    万次阅读 多人点赞 2019-10-27 12:03:24
    个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:... 微信小程序之授权登录 一、前言 由于微信官方修改了 getUserIn...
  • 都是些小程序源码,有的还有后台,适合小白、也适合学过了的、也适合做外包的,要的可以取...https://www.douban.com/group/topic/113284790/o2o微信小程序源码-专门针对o2o类别的小程序源码集合【更新整理中...】ht...
  • 基于微信小程序的培训机构系统 前言:该系统作为本科毕业设计,可能还有很多的不足。只是当时做这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言...
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹...
  • 微信小程序集成实时音视频通话功能 背景 在项目的开发当中,很多时候,我们会有音频、视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现。尤其是这次的项目开发当中,需要在微信小程序当中...
  • 关于微信小程序文字水平垂直居中

    万次阅读 多人点赞 2020-08-28 09:06:49
    1.用line-height的值和view的height值一样wxml:&lt;view class='container'&gt; 这是个例子 &lt;/view&gt;wxss:.container{ border: 2rpx black solid; width: 400rpx;... line-h...
  • 微信小程序商城demo

    万次阅读 2020-05-13 19:44:06
    https://github.com/EastWorld/wechat-app-mall
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 很多朋友都认为微信小程序申请、部署、发布很难,需要很长时间。 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发、部署、发布的方式。当然,实现的...
1 2 3 4 5 ... 20
收藏数 285,897
精华内容 114,358
关键字:

微信小程序