微信开发者根据跟踪

2018-09-06 11:43:47 weixin_34291004 阅读数 79

一、小程序介绍与开发环境:

1、helloworld代码 【1】请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。 【2】打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选“建立普通快速启动模板”的选项。

2、小程序介绍 【1】小程序技术发展历史 【2】小程序与普通网页开发的区别

3、小程序的特色 小程序的模式使得微信可以开放更多的数据,开发者可以获取到用户的一些基本信息,甚至能够获取微信群的一些信息,使得小程序的开放能力变得更加强大。

4、小程序的开发准备 【1】申请AppID: mp.weixin.qq.com/  【2】 安装开发者工具 【3】 编写代码

5、总结 简单介绍了小程序是什么,小程序的技术发展历史以及开发小程序之前需要做的准备工作。

二、小程序代码组成:

1、JSON配置 【1】 打开例子,查看代码 【2】 json语法 【3】 json数据格式:数字,字符串,布尔,数组,对象,Null 注意:JSON 文件中无法使用注释,试图添加注释将会引发报错。

2、WXML模板 【1】 简介 WXML 文件后缀名是 .wxml ,打开 pages/wxml/index.wxml 文件,有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式,简单的 WXML语句在语法上同 HTML 非常相似。 【2】 数据绑定 数据绑定正确的写法

【3】逻辑语法 { name: 'world' }

【4】条件逻辑 if单个分支

if多个分支

【5】列表渲染 array是一个数组

【6】模板

【7】引用 WXML 提供两种文件引用方式import和include。 《1》import 可以在该文件中使用目标文件定义的 template。需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。 《2》include 可以将目标文件中除了template外的整个代码引入,相当于是拷贝到 include位置。 【8】共同属性 id:组件的唯一标识 class:组件的样式类 style:组件的内联样式 hidden:组件是否显示 data-:自定义属性 bind/catch*:组件的事件

3、WXSS样式 【1】简介 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。 【2】文件组成 other.wxss(其它样式):其它样式可以被项目公共样式和页面样式引用 index.wxss(页面样式):与app.json注册过的页面同名且位置同级的WXSS文件 app.wxss(项目公共样式):根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面 【3】尺寸单位 rpx:responsive pixel(尺寸单位) 公式是: iPhone 5:1rpx = 320 / 750 px = 0.42px iPhone 6:1rpx = 375 / 750 px = 0.5px iPhone 6 Plus:1rpx = 414 / 750 px = 0.552px 【4】WXSS引用 @import './test_0.wxss' 这种方法在请求上不会把test_0.css合并到index.css中,也就是请求index.css的时候,会多一个test_0.css的请求。WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。 【5】内联样式 <!—静态内联样式-->

<!—动态内联样式--> { eleColor: 'red', eleFontsize: '48rpx' }

【6】选择器 权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式。 id选择器:#id 类选择器:.class 元素选择器:element 伪元素选择器:::after 伪元素选择器:::before 【7】官方样式库 为了减轻开发者样式开发的工作量,我们提供了WeUI.wxss基础样式库。WeUI是一套与微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

4、Javascript脚本 【1】 ECMAScript介绍: ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript 是 ECMAScript 的一种实现。  ECMAScript语言的重要组成部分:语法、类型、语句、关键字、操作符、对象 浏览器中JavaScript 构成:ECMAScript、BOM(浏览器对象模型)、DOM(文档对象模型) NodeJS中JavaScript 构成:ECMAScript、NPM(包管理系统)、Native(模块) 小程序中JavaScript 构成:ECMAScript、小程序框架、小程序API 【2】 小程序的执行环境: 《1》iOS平台,包括iOS9、iOS10、iOS11 《2》Android平台 《3》小程序IDE 【3】 模块化: 浏览器中,所有 JavaScript 是在运行在同一个作用域下的,定义的参数或者方法可以被后续加载的脚本访问或者改写。同浏览器不同,小程序中可以将任何一个JavaScript 文件作为一个模块,通过module.exports 或者 exports 对外暴露接口。 【4】 脚本执行的顺序: 浏览器中,脚本严格按照加载的顺序执行。而在小程序中的脚本执行顺序有所不同。小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序, 【5】 作用域: 同浏览器中运行的脚本文件有所不同,小程序的脚本的作用域同 NodeJS 更为相似。在文件中声明的变量和函数只在该文件中有效,不同的文件中可以声明相同名字的变量和函数,不会互相影响。

5、总结 介绍了小程序里的代码文件构成,以及他们所扮演的角色。

三、理解小程序宿主环境:

1、简介 小程序可以调用宿主环境提供的微信客户端的能力,这就使得小程序比普通网页拥有更多的能力。你也会了解到,你的小程序会运行在不同版本的宿主环境下,因此针对各个版本的宿主环境做程序上的兼容也是在所难免的。

2、渲染层和逻辑层 《1》渲染层 渲染层和数据相关。 逻辑层负责产生、处理数据。 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

3、通信模型 小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发。

4、数据驱动 在开发UI界面过程中,程序需要维护很多变量状态,同时要操作对应的UI元素。随着界面越来越复杂,我们需要维护很多变量状态,同时要处理很多界面上的交互事件,整个程序变得越来越复杂。通常界面视图和变量状态是相关联的,如果有某种“方法”可以让状态和视图绑定在一起(状态变更时,视图也能自动变更),那我们就可以省去手动修改视图的工作。

5、双线程下的界面渲染 小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面

6、程序和页面 【1】程序:“小程序”指的是产品层面的程序,而“程序”指的是代码层面的程序实例 《1》程序构造器App() 宿主环境提供了 App() 构造器用来注册一个程序App,需要留意的是App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。 App实例的生命周期函数:onLaunch / onShow / onHide / onError 《2》程序的生命周期和打开场景 初次进入小程序的时候,微信客户端初始化好宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,把它注入到宿主环境,初始化完毕后,微信客户端就会给App实例派发onLaunch事件,App构造器参数所定义的onLaunch方法会被调用。 《3》小程序全局数据 在上文中说道App实例是单例的,因此不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。

【2】页面:一个小程序可以有很多页面,每个页面承载不同的功能,页面之间可以互相跳转。 《1》文件构成和路径 一个页面是分三部分组成:界面、配置和逻辑。界面由WXML文件和WXSS文件来负责描述,配置由JSON文件进行描述,页面逻辑则是由JS脚本文件负责。 《2》页面构造器Page() 宿主环境提供了 Page() 构造器用来注册一个小程序页面,Page()在页面脚本page.js中调用。 Page实例的生命周期函数:onLoad / onReady / onShow / onHide /onUnload 页面的用户行为函数:onPullDownRefresh / onReachBottom / onShareAppMessage / onPageScroll 《3》页面的生命周期和打开参数 页面初次加载的时候,微信客户端就会给Page实例派发onLoad事件,页面显示之后,Page构造器参数所定义的onShow方法会被调用, 在页面初次渲染完成时,Page构造器参数所定义的onReady方法会被调用。 《4》页面的数据 小程序的页面结构由WXML进行描述,WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段,这里所说的数据其实就是来自于页面Page构造器的data字段,data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。 《5》页面的用户行为 下拉刷新 onPullDownRefresh 上拉触底 onReachBottom 页面滚动 onPageScroll 用户转发 onShareAppMessage 《6》页面跳转和路由 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面。 打开新页面 调用:API wx.navigateTo 页面重定向 调用:API wx.redirectTo 页面返回 调用:API wx.navigateBack Tab:切换 调用 API wx.switchTab 重启动:调用 API wx.reLaunch

7、组件 一个小程序页面可以分解成多个部分组成,组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开发,小程序的宿主环境提供了一系列基础组件。组件是在WXML模板文件声明中使用的,WXML的语法和HTML语法相似,小程序使用标签名来引用一个组件,通常包含开始标签和结束标签,该标签的属性用来描述该组件。

8、API 宿主环境提供了丰富的API,可以很方便调起微信提供的能力。 一般调用的约定:

wx.on* 开头的 API 是监听某个事件发生的API接口,接受一个 Callback 函数作为参数。当该事件触发时,会调用 Callback 函数。 如未特殊约定,多数 API 接口为异步接口 ,都接受一个Object作为参数。 API的Object参数一般由success、fail、complete三个回调来接收接口调用结果,示例代码如代码清单3-17所示,详细说明如表3-9所示。 wx.get* 开头的API是获取宿主环境数据的接口。 wx.set* 开头的API是写入数据到宿主环境的接口。 【6】事件 《1》事件简介 在小程序里边,我们把这种“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”。

《2》事件类型和事件对象

《3》事件绑定与冒泡捕获 事件绑定的写法和组件属性一致,以key="value"的形式:

key以bind或者catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。 bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

9、兼容 小程序的宿主环境一直在迭代更新,提供更多的能力给开发者去完成更多的事情,所以你的小程序会运行在不同版本的宿主环境下。为了让你的小程序在不同环境下都能提供相应的服务,我们需要来了解一下在小程序中如何实现兼容办法。

10、总结 介绍了小程序宿主环境的基本运行机制以及它所提供的各种能力,组合这些能力可以完成一个体验非常流畅的小程序,同时读者也了解到如何对小程序在不同环境下兼容的办法,以便给不同环境下的的微信用户提供可靠或者降级的服务。

四、场景应用:

1、开发流程基本介绍 在启动开发前,首先我们对整个小程序整体的产品体验有一个清晰的规划和定义,一般会通过交互图或者手稿描绘小程序的界面交互和界面之间的跳转关系。

2、基本的布局方法-Flex布局 【1】简介 如果你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全。开启样式自动补全,在“项目”—“项目设置”—勾选“上传代码时样式自动补全”。 【2】基本概念 flex的概念最早是在2009年被提出,目的是提供一种更灵活的布局模型,使容器能通过改变里面项目的高宽、顺序,来对可用空间实现最佳的填充,方便适配不同大小的内容区域。 【3】容器属性 display属性: flex; flex-direction属性: row(默认值) | row-reverse | column |column-reverse flex-wrap:nowrap(默认值) | wrap | wrap-reverse justify-content属性: flex-start(默认值) | flex-end | center |space-between | space-around | space-evenly align-items属性: stretch(默认值) | center | flex-end | baseline | flex-start align-content属性: stretch(默认值) | flex-start | center |flex-end | space-between | space-around | space-evenly 【4】项目属性 order属性: 0(默认值) | flex-shrink属性: 1(默认值) | flex-grow属性: 0(默认值) | flex-basis属性: auto(默认值) | flex属性: none | auto | @flex-grow @flex-shrink @flex-basis align-self属性: auto(默认值) | flex-start | flex-end |center | baseline| stretch

3、界面的常见交互反馈 【1】触摸反馈 通常页面会摆放一些button按钮或者view区域,用户触摸按钮之后会触发下一步的操作。 【2】Toast和模态对话框 在完成某个操作成功之后,我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上,Toast提示默认1.5秒后自动消失。 【3】界面滚动 往往手机屏幕是承载不了所有信息的,所以内容区域肯定会超出屏幕区域,用户可以通过滑动屏幕来查看下一屏的内容,这是非常常见的界面滚动的交互。

4、发起HTTPS网络通信 【1】简介 小程序经常需要往服务器传递数据或者从服务器拉取信息,这个时候可以使用wx.request这个API,在这一节我们会重点讨论wx.request的使用和注意事项。 【2】wx.request接口 url:开发者服务器接口地址 data:请求的参数 header:设置请求的 header,header 中不能设置 Referer,默认header['content-type'] = 'application/json' method:(需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT dataType:回包的内容格式,如果设为json,会尝试对返回的数据做一次 JSON解析 success:收到开发者服务成功返回的回调函数,其参数是一个Object fail:接口调用失败的回调函数 complete:接口调用结束的回调函数(调用成功、失败都会执行) 【3】服务器接口 url参数是当前发起请求的服务器接口地址,小程序宿主环境要求request发起的网络请求必须是https协议请求,因此开发者服务器必须提供HTTPS服务的接口,同时为了保证小程序不乱用任意域名的服务,wx.request请求的域名需要在小程序管理平台进行配置[2],如果小程序正式版使用wx.request请求未配置的域名,在控制台会有相应的报错。 【4】请求参数 通过wx.request这个API,有两种方法把数据传递到服务器:通过url上的参数以及通过data参数。举个例子:我们需要向服务器拿id为1的用户的信息,同时我们把当前小程序的版本带给服务器,让服务器可以做新旧版逻辑兼容。 【5】收到回包 通过wx.request发送请求后,服务器处理请求并返回HTTP包,小程序端收到回包后会触发success回调,同时回调会带上一个Object信息。 【6】一般使用技巧 《1》设置超时时间 小程序发出一个HTTPS网络请求,有时网络存在一些异常或者服务器存在问题,在经过一段时间后仍然没有收到网络回包,我们把这一段等待的最长时间称为请求超时时间。小程序request默认超时时间是60秒,一般来说,我们不需要这么长的一个等待时间才收到回包,可能在等待3秒后还没收到回包就需要给用户一个明确的服务不可用的提示。 《2》请求前后的状态处理 大部分场景可能是这样的,用户点击一个按钮,界面出现“加载中...”的Loading界面,然后发送一个请求到后台,后台返回成功直接进入下一个业务逻辑处理,后台返回失败或者网络异常等情况则显示一个“系统错误”的Toast,同时一开始的Loading界面会消失。 【7】排查异常的方法 《1》检查手机网络状态以及wifi连接点是否工作正常。 《2》检查小程序是否为开发版或者体验版,因为开发版和体验版的小程序不会校验域名。 《3》检查对应请求的HTTPS证书是否有效,同时TLS的版本必须支持1.2及以上版本,可以在开发者工具的console面板输入showRequestInfo()查看相关信息。 《4》域名不要使用IP地址或者localhost,并且不能带端口号,同时域名需要经过ICP备案。 《5》检查app.json配置的超时时间配置是否太短,超时时间太短会导致还没收到回报就触发fail回调。 《6》检查发出去的请求是否302到其他域名的接口,这种302的情况会被视为请求别的域名接口导致无法发起请求。

5、微信登录 【1】获取微信登录凭证code 【2】发送code到开发者服务器 【3】到微信服务器换取微信用户身份id 【4】绑定微信用户身份id和业务用户身份(openid:微信用户的唯一标识,session_key:会话密钥,unionid:用户在微信开放平台的唯一标识符) 【5】业务登录凭证SessionId

6、本地数据缓存 【1】读写本地数据缓存 小程序提供了读写本地数据缓存的接口,通过wx.getStorage/wx.getStorageSync读取本地缓存,通过wx.setStorage/wx.setStorageSync写数据到缓存,其中Sync后缀的接口表示是同步接口[9],执行完毕之后会立马返回。 【2】缓存限制和隔离 小程序宿主环境会管理不同小程序的数据缓存,不同小程序的本地缓存空间是分开的,每个小程序的缓存空间上限为10MB,如果当前缓存已经达到10MB,再通过wx.setStorage写入缓存会触发fail回调。 【3】利用本地缓存提前渲染界面 讨论一个需求:我们要实现了一个购物商城的小程序,首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据,等待wx.request的success回调之后把数据通过setData渲染到界面上。 【4】缓存用户登录态SessionId 处理用户登录态的一般方法,通常用户在没有主动退出登录前,用户的登录态会一直保持一段时间[10],就无需用户频繁地输入账号密码。如果我们把SessionId记录在Javascript中某个内存变量,当用户关闭小程序再进来小程序时,之前内存的SessionId已经丢失,此时我们就需要利用本地缓存的能力来持久化存储SessionId。

7、设备能力 【1】利用微信扫码能力 为了让用户减少输入,我们可以把复杂的信息编码成一个二维码,利用宿主环境wx.scanCode这个API调起微信扫一扫,用户扫码之后,wx.scanCode的success回调会收到这个二维码所对应的字符串信息。 【2】获取网络状态 我们知道手机连接到互联网有几种方式:Wifi、2G、3G、4G,包括很快到来的5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

8、总结 学习了小程序开发中经常遇到的场景:利用Flex布局来进行小程序界面布局、常见的界面交互反馈、如何进行网络通信让小程序和开发者服务器进行交互等,我们就这些场景详细介绍了相关的API的使用技巧和注意事项。

五、小程序的协同工作和发布:

1、协同工作 【1】人员组织结构和权限分配 多数情况下,一个团队多人同时参与同一个小程序项目,每个角色所承担的工作或者权限不一样,中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理,我们通过虚拟一个项目成员组织结构来描述日常如何协同合作完成一个小程序的发布。 项目管理:产品组、设计组、开发组、测试组 工作流程:需求提出 —》 设计 —》 开发 —》 体验 —》 测试 —》 发布 【2】小程序的版本 一般的软件开发流程,开发者编写代码自测开发版程序,直到程序达到一个稳定可体验的状态时,开发者会把这个体验版本给到产品经理和测试人员进行体验测试,最后修复完程序的Bug后发布供外部用户正式使用。 所有版本:开发版本、体验版本、审核中版本、线上版本

2、用户体验审视 【1】产品和运营思路 在运营行为上,小程序需要遵从微信小程序运营规范。若开发者的小程序违反了其中的条款、相关平台规则或法律法规,或对公众平台、开放平台造成了影响,可能会被强制处罚。条款将根据新问题、相关法律法规或产品运营需要对其内容进行修改并更新,详细条款请查阅小程序运营文档。 【2】体验和设计评估 9点基础设计原则: 《1》导航清晰 《2》流程明确 《3》重点突出 《4》符合预期 《5》 等待与反馈 《6》 异常处理 《7》内容和文案准确友好 《8》和谐统一 《9》平台适配

【3】用户体验测试和完善体验 《1》用户体验测试,可以在设计、开发、测试等全部阶段使用。是一种低成本检测设计质量的方法。 《2》尽早进行用户体验测试。在产品及设计过程中,尚未启动开发时,便可以用低保真/高保真模型进行用户体验测试,以检测设计质量。这样更有利于及早发现问题并进行调整,减少开发成本。 《3》用户测试之前需要确定好需要被检验的流程和任务,需要为用户构建明确的目标,并提示用户以完成任务的方式完成目标。 《4》最好选择产品真实的受众,作为被测试的用户。并在测试时,使用户处于真实的场景和时间下。 《5》设计开放性的问题让用户回答。不用带有主观性的询问语言,引导用户回答。 《6》在用户测试过程中,需要全程做好记录。

3、发布 【1】发布前最后的检查 《1》如果小程序使用到Flex布局,并且需要兼容iOS8以下系统时,请检查上传小程序包时,开发者工具是否已经开启“上传代码时样式自动补全”。 《2》小程序使用的服务器接口应该走HTTPS协议,并且对应的网络域名确保已经在小程序管理平台配置好。 《3》在测试阶段不要打开小程序的调试模式进行测试,因为在调试模式下,微信不会校验域名合法性,容易导致开发者误以为测试通过,导致正式版小程序因为遇到非法域名无法正常工作。 《4》发布前请检查小程序使用到的网络接口已经在现网部署好,并且评估好服务器的机器负载情况。

【2】发布模式 小程序提供了两种发布模式:全量发布和分阶段发布。 《1》全量发布是指当点击发布之后,所有用户访问小程序时都会使用当前最新的发布版本。 《2》分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本,分阶段发布我们也称为灰度发布。

【3】小程序码 小程序码在样式上更具辨识度和视觉冲击力,相对于二维码来说,小程序主题的品牌形象更加清晰明显,可以帮助开发者更好地推广小程序。在发布小程序之后,小程序管理平台会提供对应的小程序码的预览和下载,开发者可以自行下载用于线上和线下的小程序服务推广。

4、运营 【1】数据分析 《1》常规分析 小程序数据分析,是面向小程序开发者、运营者的数据分析工具,提供关键指标统计、实时访问监控、自定义分析等,帮助小程序产品迭代优化和运营。主要功能包括每日例行统计的标准分析,以及满足用户个性化需求的自定义分析。 《2》自定义分析 除了小程序宿主环境提供的数据分析能力,为了让开发者可以更加灵活多维和近实时的用户行为分析,小程序平台提供了自定义上报的特性,开发者可以对用户在小程序内的行为做精细化跟踪,满足页面访问等标准统计以外的个性化分析需求。

【2】运维中心 我们的程序变更总会伴随一些Bug产生,小程序的逻辑代码由JavaScript脚本编写,JavaScript可以通过一些方法[7]来检测运行时异常的发生,小程序宿主环境已经内置了异常检测的模块,并且上报到小程序平台,开发者可以通过小程序平台的“运维中心”查看具体的错误日志,开发者根据日志详细定位自己代码的异常处并及时修复。

【3】微信开发者社区 小程序的宿主环境和微信客户端持续在迭代变更,避免不了变更的同时引起一些Bug导致小程序无法正常工作,所以微信官方提供了微信开发者社区[8],开发者可以在社区上进行提问或者查看问题进展,小程序官方会在社区第一时间同步各种Bug的解决办法。由于小程序官方的人力有限,所以我们鼓励开发者在社区上互助答疑,提高效率。

一般提问反馈Bug时需要的信息: 《1》一个清晰的问题标题,直接简洁的描述问题的核心点,可以有效的让回答者在问题列表中更快的理解你的难处。 《2》Bug的类型归属,例如是开发者工具出现的问题,还是小程序API出现的问题,开发者要描述清楚。 《3》Bug发生的环境是什么?是在微信客户端的iOS端还是安卓端,对应的微信版本是多少,宿主环境的版本是多少? 《4》Bug详细的描述,开发者应该清晰地描述Bug的具体表现,产生Bug的具体途径,并且给出自己期望的结果,以便回答者可以验证是否能解决此问题。 《5》给出一个最简单能够复现问题的代码能够让回答者更快的定位问题所在。

5、总结 阐述了软件项目的各个角色的合作流程,罗列了小程序提供的角色权限管理,让项目管理者可以更便捷地管理团队成员。同时为了配合项目开展的各个流程,小程序提供了不同的版本,开发者要合理运用不同版本的特点来进行开发、测试、体验等工作。我们还给了一些用户体验审视的原则,开发者可以在发布小程序之前认真审视自己的小程序体验,以达到更高的用户水准。最后我们提到发布时可以利用小程序平台提供的两种模式进行发布,开发者根据业务情况选择合理的模式进行发布,并且利用小程序平台提供的数据分析服务来帮助运营自己的小程序,让用户可以使用一个稳定可靠的小程序服务。

六、底层框架:

1、双线程模型 【1】技术上选型 《1》用纯客户端原生技术来渲染 《2》用纯 Web 技术来渲染 《3》用客户端原生技术与 Web 技术结合的混合技术(下称 Hybrid 技术)来渲染 【2】管控与安全 【3】天生的延时

2、组件系统 【1】Exparser框架 Exparser的主要特点包括以下几点: 《1》基于Shadow DOM模型:模型上与WebComponents的ShadowDOM高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他API以支持小程序组件编程。 《2》可在纯JS环境中运行:这意味着逻辑层也具有一定的组件树组织能力。 《3》高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小。

【2】内置组件 基于Exparser框架,内置了一套组件,提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。有了这么丰富的组件,再配合WXSS,我们可以搭建出任何效果的界面。在功能层面上,也满足绝大部分需求。

【3】自定义组件 《1》ShadowTree的概念 在Exparser的组件模型中,这两个节点树可以被拼接成上方的页面节点树。其中,组件的节点树称为“ShadowTree”,即组件内部的实现;最终拼接成的页面节点树被称为“Composed Tree”,即将页面所有组件节点树合成之后的树。在进行了这样的组件分离之后,整个页面节点树实质上被拆分成了若干个ShadowTree(页面的body实质上也是一个组件,因而也是一个ShadowTree)。 《2》运行原理 在使用自定义组件的小程序页面中,Exparser将接管所有的自定义组件注册与实例化。 组件创建的过程大致有以下几个要点: 《1》根据组件注册信息,从组件原型上创建出组件节点的JS对象,即组件的this; 《2》将组件注册信息中的data 复制一份,作为组件数据,即this.data; 《3》将这份数据结合组件WXML,据此创建出Shadow Tree,由于Shadow Tree中可能引用有其他组件,因而这会递归触发其他组件创建过程; 《4》将ShadowTree拼接到Composed Tree上,并生成一些缓存数据用于优化组件更新性能; 《5》触发组件的created生命周期函数; 《6》如果不是页面根组件,需要根据组件节点上的属性定义,来设置组件的属性值; 《7》 当组件实例被展示在页面上时,触发组件的attached 生命周期函数,如果Shadw Tree中有其他组件,也逐个触发它们的生命周期函数。 《3》组件间通信 不同组件实例间的通信有WXML属性值传递、事件系统、selectComponent和relations等方式。其中,WXML属性值传递是从父组件向子组件的基本通信方式,而事件系统是从子组件向父组件的基本通信方式。

3、原生组件 【1】原生组件运行机制 渲染的几个步聚: 《1》组件被创建,包括组件属性会依次赋值。 《2》组件被插入到DOM树里,浏览器内核会立即计算布局,此时我们可以读取出组件相对页面的位置(x, y坐标)、宽高。 《3》组件通知客户端,客户端在相同的位置上,根据宽高插入一块原生区域,之后客户端就在这块区域渲染界面。 《4》当位置或宽高发生变化时,组件会通知客户端做相应的调整。

【2】原生组件渲染机制 原生组件脱离在WebView渲染流程外,这带来了一些限制。最主要的限制是一些CSS样式无法应用于原生组件,例如,不能在父级节点使用overflow:hidden来裁剪原生组件的显示区域;不能使用transformrotate让原生组件产生旋转等。

4、小程序与客户端通信原理 【1】视图层组件 内置组件中有部分组件是利用到客户端原生提供的能力,这类组件基本都是前一个章节描述的原生组件。既然需要客户端原生提供的能力,那就会涉及到视图层与客户端的交互通信。

【2】逻辑层接口 逻辑层与客户端原生通信机制与渲染层类似,不同在于,iOS平台可以往JavaScripCore框架注入一个全局的原生方法,而安卓方面则是跟渲染层一致的。

5、总结 介绍了小程序底层框架的设计和原理,提出了一个全新的双线程模型,这是小程序框架与业界大多数前端Web框架不同之处。基于这个模型,我们可以做到更好地管控以及提供更安全的环境。但同时带来了无处不在的异步问题,不过我们在框架层面去封装好异步带来的时序问题,让开发者只需要懂得上层更易为理解的接口。此外,我们也介绍了基于双线程模型的组件框架,以及原生组件的机制,让开发者进一步理解以写出更合理的代码。最后,我们也阐述了小程序是如何与客户端通信的,这是小程序运行起来的最基本的原理。

6、其它框架 【1】PhoneGap 是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的框架 【2】ReactNative 是一个 JavaScript 框架,用来编写原生的 iOS 和 Android 应用 【3】微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包

七、性能优化:

1、启动: 下载小程序代码包 —》 加载小程序代码包 —》 初始化小程序首页 【1】代码包下载 在某个小程序第一次启动时,微信需要下载小程序代码包。此后,如果小程序代码包未更新且还被保留在缓存中,则下载小程序代码包的步骤会被跳过。下载到的小程序代码包不是小程序的源代码,而是编译、压缩、打包之后的代码包。 控制代码包大小的方法: 《1》精简代码,去掉不必要的WXML结构和未使用的WXSS定义。 《2》减少在代码包中直接嵌入的资源文件。 《3》压缩图片,使用适当的图片格式。

【2】分包加载流程 小程序的代码将打包在一起,在小程序启动时一次性下载完成。采用分包时,小程序的代码包可以被划分为几个:一个是“主包”,包含小程序启动时会马上打开的页面代码和相关资源;其余是“分包”,包含其余的代码和资源。 【3】代码包加载 微信会在小程序启动前为小程序准备好通用的运行环境。这个运行环境包括几个供小程序使用的线程,并在其中完成小程序基础库的初始化,预先执行通用逻辑,尽可能做好小程序的启动准备。这样可以显著减少小程序的启动时间。

2、页面层级准备 在视图层内,小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级,每次调用wx.navigateTo,都会创建一个新的页面层级;相对地,wx.navigateBack会销毁一个页面层级。 页面层级的准备工作分为三个阶段: 第一阶段是启动一个WebView,在iOS和Android系统上,操作系统启动WebView都需要一小段时间。 第二阶段是在WebView中初始化基础库,此时还会进行一些基础库内部优化,以提升页面渲染性能。 第三阶段是注入小程序WXML结构和WXSS样式,使小程序能在接收到页面初始数据之后马上开始渲染页面(这一阶段无法在小程序启动前执行)。

3、数据通信 【1】页面初始数据通信 【2】更新数据通信 《1》执行setData调用时,最好遵循以下原则: 不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用; 《2》数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据; 《3》与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下。 【3】用户事件通信

4、视图层渲染 【1】初始渲染 初始渲染发生在页面刚刚创建时。初始渲染时,将初始数据套用在对应的WXML片段上生成节点树。节点树也就是在开发者工具WXML面板中看到的页面树结构,它包含页面内所有组件节点的名称、属性值和事件回调函数等信息。最后根据节点树包含的各个节点,在界面上依次创建出各个组件。 【2】重渲染 初始渲染完毕后,视图层可以多次应用setData的数据。每次应用setData数据时,都会执行重渲染来更新界面。每次重渲染时,将data和setData数据套用在WXML片段上,得到一个新节点树。然后将新节点树与当前节点树进行比较,这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后,将setData数据合并到data中,并用新节点树替换旧节点树,用于下一次重渲染。

5、原生组件通信

6、总结 介绍了小程序的运行流程和一些重要细节,还介绍了进行优化的基本方法。主要的优化策略可以归纳为三点:精简代码,降低WXML结构和JS代码的复杂性;合理使用setData调用,减少setData次数和数据量;必要时使用分包优化。

八、小程序基础库的更新迭代:

1、小程序基础库 【1】基础库载入时机 我们在开发网页时,经常会引用很多开源的JS库,在使用到这些库所提供的API前,我们需要先在业务代码前边引入这些库。比如我们在使用jQuery库的$函数前,需要在业务代码前用script标签先引入jQuery.js。

【2】基础库的版本号 小程序基础库版本号使用 semver 规范,格式为 Major.Minor.Patch,其中Major、Minor、Patch均为整数,1.9.901、2.44.322、10.32.44 都是符合 semver 风格的版本号。通常我们月度发布版本会把Minor提升一位,例如从1.9.x升级到1.10.x,如果是修正版本,会把Patch提升一位,例如1.10.0升级到 1.10.1。Major位则是重大特性发布时才会被提升一位。

2、异常 【1】JS运行异常 【2】捕捉JS异常的方法 在WebView层有两种方法可以捕捉JS异常: 《1》try, catch方案。你可以针对某个代码块使用try,catch包装,这个代码块运行时出错时能在catch块里边捕捉到。 《2》. window.onerror方案。也可以通过window.addEventListener("error", function(evt){}),这个方法能捕捉到语法错误跟运行时错误,同时还能知道出错的信息,以及出错的文件,行号,列号。

3、基础库的更新 【1】基础库版本变动 【2】推送基础库

4、总结 介绍了如何进行小程序日常能力的迭代发布,在发布新版本基础库的过程,我们需要有检测异常现象的能力,避免故障的发生。正是这样严格的迭代流程使得小程序框架能够稳定运行在各个版本的微信客户端中,同时这种小步快跑的迭代速度让开发者可以使用新能力去完善他们的小程序交互。

九、微信开发者工具: 1、简介 微信开发者工具是一个基于nw.js ,使用node.js、chromium以及系统API来实现底层模块,使用React、Redux等前端技术框架来搭建用户交互层,实现同一套代码跨Mac和Windows 平台使用。 开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。

2、代码编译 【1】编译WXML WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用于构建出页面的结构。小程序的渲染层的运行环境是一个WebView,而WebView无法直接理解WXML标签,所以需要经过编译。 【2】编译WXSS WXSS (WeiXin Style Sheets) 是一套样式语言,用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的一些特性,包括rpx尺寸单位和样式导入语法,这些特性都是WebView无法直接理解的。 【3】编译JavaScript 微信客户端在运行小程序的逻辑层的时候只需要加载一个JS文件(我们称为app-service.js),而小程序框架允许开发者将 JavaScript 代码写在不同的文件中,所以在代码上传之前,微信开发者工具会对开发者的JS 文件做一些预处理,包括ES6转ES5和代码压缩(开发者可以选择关闭预处理操作),在服务器编译过程将每个JS文件的内容分别包裹在define域中,再按一定的顺序合并成 app-service.js 。

3、模拟器 【1】逻辑层模拟 在iOS微信客户端上,小程序的JavaScript代码是运行在JavaScriptCore中,在Android微信客户端上,小程序的JavaScript代码是通过 X5 JSCore来解析的。而在微信开发者工具上我们采用了一个隐藏着的Webivew来模拟小程序的逻辑运行环境。 【2】渲染层模拟 微信开发者工具使用chrome的 标签来加载渲染层页面,每个渲染层WebView加载。 【3】客户端模拟 微信客户端为丰富小程序的功能提供了大量的API。在微信开发者工具上,通过借助BOM(浏览器对象模型)以及node.js访问系统资源的能力,同时模拟客户端的UI和交互流程,使得大部分的API能够正常执行。 【4】通讯模拟 微信开发者工具的有一个消息中心底层模块维持着一个WebSocket服务器,小程序的逻辑层的WebView和渲染层页面的WebView通过WebSocket与开发者工具底层建立长连,使用WebSocket的protocol字段来区分Socket的来源。

4、调试器 代码调试是开发者工具的最主要的功能之一,包括界面调试和逻辑调试。nw.js对提供打开Chrome Devtools调试界面的接口,使得开发者工具具备对小程序的逻辑层和渲染层进行调试的能力。同时为了方便调试小程序,开发者工具在Chrome Devtools的基础上进行扩展和定制。

5、总结 通过编译过程我们将WXML文件和WXSS文件都处理成JS代码,使用script标签注入在一个空的html文件中(我们称为:page-frame.html);我们将所有的JS文件编译成一个单独的app-service.js。 在小程序运行时,逻辑层使用JsCore直接加载app-service.js,渲染层使用WebView加载page-frame.html,在确定页面路径之后,通过动态注入script的方式调用WXML文件和WXSS文件生成的对应页面的JS代码,在结合逻辑层的页面数据,最终渲染出指定的页面。 开发者工具使用一个隐藏着的标签来模拟JSCore作为小程序的逻辑层运行环境,通过将JSCore中不支持的BOM对象局部变量化,使得开发者无法在小程序代码中正常使用BOM,从而避免不必要的错误。 在开发者工具底层有一个HTTP服务器来处理来自WebView的请求,并将开发者代码编译处理后的结果作为HTTP请求的返回,WebView按照普通的网页进行渲染。 开发者工具利用BOM、node.js以及模拟的UI和交互流程实现对大部分客户端API的支持。 同时开发者工具底层维护着一个WebSocket服务器,用于在WebView与开发者工具之间建立可靠的消息通讯链路,使得接口调用,事件通知,数据交换能够正常进行,从而使小程序模拟器成为一个统一的整体。 微信开发者工具使用webview.showDevTools 打开Chrome Devtools调试逻辑层WebView的JS代码,同时开发了Chrome Devtools插件 WXML 面板对渲染层页面WebView进行界面调试。WXML面板对渲染层WebView中真实的DOM树做了一个最小树算法的裁剪之后,呈现出与WXML源码一致的节点树列表。

2020-03-19 17:35:39 dsy_01 阅读数 188

微信开发者工具的主页面主要是由菜单栏、工具栏、模拟器、编辑器以及调试其组成的。

菜单栏

  • 项目:新建或打开一个项目
  • 文件:新建、打开或者关闭文件
  • 编辑:编辑或格式化代码
  • 工具:包含一些辅助工具
  • 界面:控制界面部分的显示和隐藏
  • 设置:外观、快捷键、编辑器等设置
  • 帮助:帮助文档及开发者详情
  • 微信开发者工具:账号切换、开发模式更换以及调试等操作

工具栏

  • 个人中心:显示登陆用户的用户名及图像
  • 模拟器、编辑器、调试器:控制对应工具的显示和隐藏
  • 模式切换下拉菜单:在小程序模式、搜索动态页模式和插件模式之间切换
  • 编译下拉菜单:默认为普通编译,也可以根据需求添加其他编译模式
  • 编译:代码编写结束后,按Ctrl+S保存代码则直接自动编译,单击“编译”按钮则进行手动编译
  • 预览:单击生成二维码,微信扫描二维码预览运行效果
  • 真机调试:通过网络连接对手机上运行的小程序进行调试
  • 切后台:模拟小程序在手机中切后台的效果
  • 清缓存:清除数据缓存、文件缓存
  • 上传:将代码上传到小程序管理后台,如果是测试号的话,则不会显示“上传”按钮
  • 版本管理:通过git对小程序进行版本管理

模拟器

  • 手机型号:iPhone5,单击可以切换成其他手机
  • 缩放百分比:75%,可以调节预览画面的大小
  • 网络环境:WIFI,可以切换为2G、3G、4G或Offline(离线)
  • 页面路径:pages/index/index

编辑器

  • 左栏为浏览项目目录结构,右栏用于编写代码
  • 在左栏中单击某个文件,可以在右栏中对该文件进行编辑 

调试

  • Console:"控制台"面板,用于输出调试信息,也可以直接编写代码执行
  • Sources:"源代码"面板,可以查看或编辑源代码,并支持代码调试
  • Network:"网络"面板,用于记录网络请求信息,可根据它进行网络的性能优化
  • Security:"安全"面板,用于调试页面的安全和认证等信息,如HTTPS
  • AppData:"App数据"面板,可以查看或编辑当前小程序运行时的数据
  • Audits:"审计"面板,用于对小程序进行体验评分
  • Sensor:"传感器"面板,用于模拟地理位置、重力感应
  • Storage:"存储"面板,用于查看和管理本地数据缓存
  • Trace:"跟踪"面板,用于真机调试时跟踪调试信息
  • Wxml:"Wxml"面板,用于查看和调试WXML和WXSS

 

 

 

 

2020-06-01 19:25:29 qq_42419025 阅读数 49

1.首先进入https://git.weixin.qq.com/,扫码登录进入微信开发者代码管理

2.点击个人设置,再点击账户,设置git账户和git密码

3.点击右上角“+”号,创建一个项目,输入项目路径,命名空间一般选择自己的git账户,选择可见级别,创建项目

4.创建成功后如图

5.如果想要修改项目,可以点击设置,再点击高级设置,选择仓库设置来对项目进行修改

5.回到微信开发者工具,点击右上角版本管理

6.点击设置,再点击远程,添加远程仓库,url填入你要接入的远程仓库,这里我填入我刚才创建的项目的HTTPS,接入到我刚才创建的远程仓库。

7.点击工作区

8.点击master(本地分支)

9.点击右上角的树

10.点击推送,输入远程分支名

11.此时会出现一个错误,主要是因为我们没有进行认证

12.输入git账户用户名密码

13.认证之后就能推送成功了,到开发者工具代码管理就可以看到提交的代码

14.点击左上角那个代码提交

 

2014-11-19 16:31:45 u010683915 阅读数 35364
微信公众开发者模式,首先需要填写URL和Token,其中URL是开发者用来接收微信服务器数据的接口URL。Token可由开发者任意填写,用作生成签名(该Token会和接口URL中包含的Token进行比对,从而验证安全性)。而有时当我们提交时会出现“请求URL超时”的问题。现在我们来分析下这种问题的解决办法。

 1.在分析问题的前提,你需要拥有一个公网IP的服务器或者虚拟主机(注:需要使用域名,并开放80端口),这样通信顺利提交。
 2.PHP示例代码,官方可以下载,这里提供给大家。下载
 3.上传后,提交 http://域名/api.php,其中token值默认为weixin。

常见问题总结:
1.你的服务器在国外,或者服务器网速不给力,一般多试几次就可以了。如果经常这样,就需要考虑更换服务器。
2.解决微信请求URL超时,你的服务器没有正确响应Token验证:原因是因为文件编码问题,UTF-8编码无法通过,而UTF-8无BOM编码可以通过。 附:自动检测并删除BOM.rar
3.技术分析跟踪http记录的方法来查看我们自己的服务器收到了请求没有回应,还是微信根本没有发请求过来。插入代码如下:
$_SERVER['REMOTE_ADDR']
$_SERVER['QUERY_STRING']
会生成log.html来分析来源。
4.分析通信接口来源是否被屏蔽,这里举例服务器安全狗,默认如果开启WEB防火墙,保护80端口防止CC会影响通信端口使用频率 导致的请求URL超时。
这里可以使用简单的发包或者telnet来分析是否是这几个原因。

以上是梵天科技对微信请求URL超时总结的几点常见问题的解决方案,希望能帮助大家更好的完善自己的平台。

 微有趣    国内最大的微信第三方开发平台
...............................................................................................................................................................
微有趣(微信号:vyouq_com):
专注微信商家公众号提供与众不同的、有针对性的营销推广服务,提供一站式微信营销方案。
...............................................................................................................................................................
2020-02-27 21:29:13 plasma007 阅读数 608

选择版本管理:
在这里插入图片描述
初始化Git仓库:
在这里插入图片描述
创建模板:
在这里插入图片描述
如果想用微信提供的远程仓库而没有开通代码管理的话可以一键去开通,开通后新建一个仓库即项目(这时候会提示你: 如果想要拉取和提交项目,先设置密码,按提示操作就可以了 )也可以新建项目组后再新建项目
在这里插入图片描述

创建好后访问自己的项目,新建一个自述性文件(为了创建默认分支master),然后在成员页面可以添加成员,也可以将项目组邀请到该项目中
在这里插入图片描述


在这里插入图片描述
仓库创建好后复制仓库地址,回到微信开发者工具中的版本控制,
1、选择→设置→网络和认证→认证方式→使用用户名和密码→填写创建好的Git账号名和密码(创建项目时让设置的)
2、选择→设置→远程→添加→填写信息→确定
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
此时远程选项会显示出仓库MVVM,选择抓取→确定
在这里插入图片描述

抓取后选择远程的仓库,点击你要查看的分支就可以看到包括版本更新等各种信息
在这里插入图片描述

在确认所抓取的项目与本地覆盖风险后可以选择→抓取→合并,此时提示合并失败,会提示不是基于该基创建。一般如果发生本地分支版本比远程分支版本滞后并且有超前则都会显示失败。因为仓库是新建的,所以我们直接使用推送改更新仓库,这里使用强制推送(除新建外,请慎用),本地代码覆盖远程仓库代码。(熟悉Git的会使用版本回退等操作)
在这里插入图片描述
在这里插入图片描述
现在版本控制的部署工作已经完成了,如果是开发组其他成员,在项目组组长创建好开发仓库后即可下载程序包,使用开发者直接导入工程文件即可,如果是项目组成员即可正常拉取推送本地仓库。(PS:如果要正确导入工程文件,创建这个小程序的人需要在微信公众平台上将其他人设置为开发者才可以,使用测试小程序号除外)
下面看看编辑效果:
启用版本控制后微信开发者工具会有相应的变化,如果当前文件编辑与上一版本发生变化会出现 M (代表更新) 的小标签,(D是删除,C是冲突),右键该文件可以选择与上一版本比较
在这里插入图片描述
在这里插入图片描述
代码编写好后,打开版本管理,在工作区会显示已发生变化的文件。
在这里插入图片描述
这时不要急着提交,先抓取远程仓库的信息,查看更新内容是否会影响自己程序,如果对自己的程序无影响就选择拉取,将本地仓库版本更新到远程最新状态,然后再提交本地发生变化的文件,填写标题和详细来描述自己更新的代码都有什么用,为什么要更新。提交后即可推送,将本地代码更新到远程仓库中。(遇到不可以推送的一般都是版本冲突,可以从本地分支中选择一个不会冲突的版本新建分支,然后将新分支更新到远程仓库最新版本后与本地原分支合并再推送即可:版本回退)
版本冲突,可以在抓取后右键本地HEAD分支→跟踪上游分支→选择对应的分支,就可以显示提前、滞后多少个版本。
在这里插入图片描述
出现超前、滞后现象后,推送会提示失败。
在这里插入图片描述
要解决这个问题就要在版本列表中选择合适的版本右键→从xxx提交中创建分支,然后右键新建的本地分支→检出
在这里插入图片描述
然后选择拉取→选择合并方式为合并
在这里插入图片描述
在这里插入图片描述
然后右键master分支→检出(将其设置为当前HEAD),然后选择上方的合并操作,将delete分支合并到HEAD分支
在这里插入图片描述
合并成功后就可以在master分支看到之前的各个版本的更新信息,并且能成功推送(PUSH)
在这里插入图片描述
这时候再去抓取远程仓库信息,就能看到远程仓库已经更新到本地最新代码了,版本更新记录和本地一样了~
在这里插入图片描述
上面就是版本管理的基本使用方法了,已经能够满足基本的使用了。另外不使用微信提供的Git仓库也可以使用其它的代码托管平台,如GitHub、Gitlab、Gitee等。在国内的建议使用国内的代码托管平台Gitee(码云),因为使用其他平台可能有访问不了的情况。而且码云支持将自己GitHub账号上面的仓库一键克隆,GitHub虽然没有一键克隆Gitee仓库的能力,但是一个一个的将Gitee的开源仓库克隆过去是可以的。关于其它代码托管平台的具体的使用方法和上面大致一样,具体改变只是在设置的时候的账号密码是对应平台的账号密码。