㈠ 濡備綍鐢╓PS涓鐨凧S瀹忓嶅埗绮樿创涓嶅悓鐨勬暟鎹鍗曞唴瀹癸紵
瑕佸湪WPS涓浣跨敤js瀹忓嶅埗绮樿创涓嶅悓鐨勬暟鎹鍗曞唴瀹癸紝鍙浠ユ寜鐓т互涓嬫ラゆ搷浣滐細
鎵撳紑WPS锛岄夋嫨瑕佷娇鐢ㄧ殑琛ㄦ牸鏂囨。銆
鍦ㄨ〃鏍兼枃妗d腑锛岄変腑浣犺佸嶅埗鐨勫崟鍏冩牸銆
鐐瑰嚮鈥滃紑鍙戔濋夐」鍗★紝鐒跺悗鐐瑰嚮鈥滃畯鈥濇寜閽锛岃繖浼氭墦寮涓涓鏂扮殑绐楀彛銆
鍦ㄦ柊绐楀彛涓锛岀偣鍑烩滄柊寤衡濇寜閽锛岃緭鍏ュ畯鐨勫悕绉帮紝鐒跺悗鐐瑰嚮鈥滃垱寤衡濄
鍦ㄥ脊鍑虹殑缂栬緫鍣ㄧ獥鍙d腑锛岃緭鍏ヤ互涓婮S浠g爜锛
鍦ㄨ繖娈典唬鐮佷腑锛屽皢 A1:A5 鏇挎崲涓轰綘瑕佸嶅埗鐨勫崟鍏冩牸鑼冨洿锛屽皢 B 鏇挎崲涓轰綘瑕佺矘璐寸殑鍗曞厓鏍煎垪鍙枫
鐐瑰嚮鈥滀繚瀛樷濇寜閽锛岀劧鍚庡叧闂缂栬緫鍣ㄧ獥鍙c
鍥炲埌琛ㄦ牸鏂囨。涓锛岄変腑涓涓绌虹殑鍗曞厓鏍硷紝鐒跺悗鐐瑰嚮鈥滃紑鍙戔濋夐」鍗′腑鐨勨滃畯鈥濇寜閽銆
鍦ㄥ脊鍑虹殑瀹忓垪琛ㄤ腑锛岄夋嫨鍒氬垰鍒涘缓鐨勫畯锛岀劧鍚庣偣鍑烩滆繍琛屸濄
杩欎細灏嗕綘鍦ㄧ 2 姝ヤ腑閫夋嫨鐨勫崟鍏冩牸澶嶅埗鍒颁綘鍦ㄧ 5 姝ヤ腑鎸囧畾鐨勫崟鍏冩牸涓銆
濡傛灉浣犳兂澶嶅埗涓嶅悓鐨勫崟鍏冩牸锛屽彧闇瑕佹洿鏀圭 5 姝ヤ腑鐨勪唬鐮佷腑鐨勫崟鍏冩牸鑼冨洿鍜岀矘璐村崟鍏冩牸鍒楀彿鍗冲彲銆
㈡ web前端开发需要学习什么知识
首先对于Web前端初学者而言,HTML和CSS是需要掌握的内容。
HTML称为超文本标记语言,是一回种标识性的语答言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
(2)c3js参数扩展阅读:
例如,在网上商店中,用户反复观察和选择商品,购买商品,浏览一系列网页,收集所需信息,支付相应费用,最后下订单,也可以是“软件升级向导”,指导用户完成下载和安装新软件的过程,也可以是基于Intranet的报价或销售报告生成工具。
所有这些均不同于“标准”的Web网站。 常规网站使用一系列菜单或导航栏在预定路径中漫游该网站。 但是,成为Web应用程序不仅仅是下级控制的导航器。 在网站上自由漫游时,可以进行无状态和匿名访问,但是通常不接受Web应用程序。
㈢ 微信内H5页面打开手机APP功能,使用开放标签
前言手机浏览器跳转APP是可以用UrlScheme的,但是在微信打开的页面中确不能使用UrlScheme,原因在于微信将UrlScheme功能给禁用了,那么怎么解决呢,微信虽然禁了该方式,但是给咱们开放了另外一种方式,也就是按照微信官方文档的步骤来,毕竟是别人的地盘,咱只能照做,不过官方文档写的并不详细,而且非常多的坑,稍不注意就掉进去了,这里我对该功能进行了总结,希望能帮助到大家。
实现的需求app分享到微信的H5卡片网页(https的网页),用户打开该网页后上方有一个打开APP的按钮,如果手机已经安装了APP,则直接打开APP,如果未安装则跳转到应用市场进行下载
实现原理利用微信提供的开放标签wx-open-launch-app,来进行跳转,通过该标签还能够得知当前手机是否安装app,如果已安装则打开app,未安装则跳转应用宝,在ios下应用宝会自动跳转AppStore去,我们可以巧妙的利用这个功能。官方文档-开放标签说明
准备工作微信公众号(已认证的服务号),拿到开发者ID(AppID)和开发者密码(AppSecret),并设置IP白名单(计算签名的服务器IP)
该服务号必须绑定JS接口安全域名,也就是移动端H5页面的域名
关联移动应用(APP)的绑定关系,微信开放平台准备一个账号,主体需要和微信公众的服务号一致,并将服务号绑定在微信开放平台账号下,并在开放平台内绑定app,并设置域名与所需跳转的app,并拿到绑定的移动应用的AppID。关联说明文档
准备工作完成后应该拿到的3样东西,不清楚的看准备工作章节开发者ID(AppID),开发者密码(AppSecret)
移动应用关联的APPID
开始开发app开发人员也需要提前接入SDK,才能使用,否则跳转不生效,接入文档,接入后可以分享页面到微信,以卡片的形式展示(只有分享的页面才能使用打开app功能,在微信内容通过点击链接是不行的)
前后端开发流程说明
由于实现整个过程需要后端来计算一个签名,所以需要先后端开发一个接口给前端,前端需要将当前页面的url传到后端参与签名,后端将签名信息返回给前端。具体请查看以下内容
后端开发工作签名步骤
获取access_token官方文档
appid和secret参数就是开发者ID(AppID),开发者密码(AppSecret)GET?https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET成功后会拿到access_token
{"access_token":"sdfad.....1561","expires_in":7200}获取jsapi_ticket,用第一步拿到的access_token采用httpGET方式请求获得jsapi_ticket(有效期2小时,后端需要对jsapi_ticket全局缓存,微信有请求次数限制)
GET?https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi成功后会得到ticket
{??"errcode":0,??"errmsg":"ok",??"ticket":"-",??"expires_in":7200}计算签名,官方文档
拼接参数
jsapi_ticket参数为上一个步骤拿到的ticket,noncestr为随机字符串,timestamp为当前时间戳,url为当前前端页面的URL地址(不包含#后面的字符,所以这里最好做成活的,让前端传过来),字段名和字段值都采用原始值,不进行URL转义
jsapi_ticket=_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value对拼接后的字符串进行sha1签名,得到signature
将下面的参数返回给前端即可
{??appId:?'',?//?开发者ID(AppID)??timestamp:?,?//?生成签名的时间戳??nonceStr:?'',?//?生成签名的随机字符串??signature:?'',//?sha1签名}前端开发工作请求后端提供的接口获取签名
引入JS-SDK
<script?src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>通过SDK的config方法将请求后端得到的签名信息传入配置项
wx.config({??debug:?true,?//?开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印??appId:?'',?//?必填,公众号的唯一标识??timestamp:?,?//?必填,生成签名的时间戳??nonceStr:?'',?//?必填,生成签名的随机串??signature:?'',//?必填,签名??jsApiList:?['checkJsApi'],?//?必填,需要使用的JS接口列表,没有就随便填一个??openTagList:?['wx-open-launch-app']?//必填,?要申请的开放标签名称})将调试模式打开,当在微信内打开分享的该H5页面后,页面弹出?ok?字样就说明验证成功了
在vue项目内使用开放标签appid就是移动应用关联的APPID,extinfo为需要传递给app的参数(仅支持字符串类型),launch事件为用户点击了跳转app按钮,error为跳转app失败事件
<wx-open-launch-app??appid="关联的app应用id"?:extinfo="extinfo"?@launch="wxlaunchFn"?@error="wxerrorFn">??????<script?type="text/wxtag-template">???????????<style>.btn?{padding:?12px;}</style>?????????<p?class="btn">在APP内打开</button>??????</script></wx-open-launch-app>注意事项:只有在签名,域名,都验证成功后,开放标签才会显示,否则什么都看不见
可以在打开失败的事件下,做判断,如果未安装app,则跳转应用市场让用户选择下载安装app
{"access_token":"sdfad.....1561","expires_in":7200}0其它补充只有在签名,域名,都验证成功后,开放标签才会显示,否则是看不见开放标签按钮的
开放标签的样式只能写在里面的style标签内,写在外面是不生效的
可以将开放标签外面套一个div,然后div定位到需要的地方,用自己的按钮显示在那个位置,然后将开放标签内的按钮设置成透明,盖在上面,这样方便调试样式(原理:用户看见的是我们自己的按钮,实际点击到的是微信的开放标签按钮)
为了便于调试可以使用微信开发者工具-公众网页-下进行调试,调试时是需要将代码放到JS安全域名下的服务器上的,所以每修改代码都要提交到服务器,非常繁琐,(可以通过配置host来实现本地调试,将安全域名映射到本地服务器然后搭配微信开发者工具进行预览调试)
注意,当公司有多个服务号的时候,容易搞混账号这3个参数开发者ID(AppID),AppSecret,应用APPID,导致验证失败,这个特别注意
注意,如果有人删了微信公众号内的安全域名,刚删除时签名校验也会提示Ok,但是但是点击打开app是没有反应的,所以如果代码没有改动而点击打开app没反应那么首先去检查安全域名是否被正确