微信页面

微信小程序开发环境安装以及相关设置配置 一.安装 软件名称: wechat_devtools_1.02.1907232_x64 软件安装地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 使用官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/ 二.小程序项目创建以及设置 点创建项目时候其中appid是唯一的需要去自己小程序账号上查找 下面选项一般 不使用云服务 其中相关设置点击 设置 或者右上角详情可以点出相关设置 其中本地测试需要在右上角 详情 → 本地设置 → 不校验合法域名进行勾选 三.目录结构 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 文件 必需 作用 app.js 是 小程序逻辑 app.json 是 小程序公共配置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成，分别是： 文件类型 必需 作用 js 是 页面逻辑 wxml 是 页面结构 json 否 页面配置 wxss 否 页面样式表 注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。 四.常用配置 一.配置项 属性 类型 必填 描述 最低版本 pages string[

由于公司业务需要，想用户通过我们公众号平台支付的金额直接进去用户自己的账户，所以涉及到公众号第三方授权； 由于涉及第三方，故需要在微信开放平台创建第三方平台； 创建第三方平台： (申请页面链接:https://open.weixin.qq.com) 2，公众号授权 api地址 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=&lang=zh_CN 授权有两种方式:： 方式一：授权注册页面扫码授权 方式二：点击移动端链接快速授权 这里讲的是方式一扫码授权,前端方面比较简单， 第一：通过掉后台接口拿到预授权码 （pre_auth_code） 预授权码是第三方平台方实现授权托管的必备信息 　　 预授权码是需要后台掉微信api去获取，前端只负责找后台拿就行,这里后台还需要返回回调URL ，下一步需要 第二 ： 拿到预授权后，直接通过预授权码和第三方appId 也就是我们自己公众号appid 参数 直接跳转授权网址： 授权网址为: 　　 https://mp.weixin.qq.com/cgi-bin/componentloginpage?component\_appid=xxxx&pre\_auth\

为了回顾一下之前学习的Axure，悄悄做了一个案例练练手，因为有用电子读书APP的习惯，再加上是常用APP差不多都绑定了QQ，所以选择腾讯旗下的微信读书作为这次案例的目标，功能点还没做完，只做了一部分，高深的部分还有待深入及后续的更新，目前先PO上已完成的原型设计图，在以后案例更新中会增加制作的详细的制作过程，既算是做一个总结，也希望能给同样正在学习的新手带来一点帮助（PS：这次已经成稿了，后面功能点的补充也会补上制作过程，博主有那么一丢丢的懒，之前做的过程就先省略啦~~~） 1. 站点地图 制作原型之前最好先构思一下自己的原型框架（功能复杂的话可以结合思维导图的模式），然后建出站点地图，这样可以帮助自己理清逻辑，当然，在实际制作的过程中还需要不断对产品的站点地图进行修改 2、手机框架（即我的站点地图中的微信读书） 对与APP的原型制作不同于网站，网站是很多网页完整的刷新，而APP，我们既要看到一个手机，又要看到里面的内容，而手机外壳最好是不要进行刷新的，这个可以借助内部框架部件来实现。如下图所示： 3、登录 APP打开的第一个页面，已经完成的功能点包括微信登录链接、单选是否已阅读并同意软件服务协议及隐私政策，如下图所示： 4、微信授权登录 在APP登录页面选择“微信登录”后跳转到微信进行授权的页面，如下图所示： 5、发现页面之新书页面 在微信进行授权页面点击“确认登录

小程序webview实践 -- 张所勇 大家好，我是转转开放业务部前端负责人张所勇，今天主要来跟大家分享小程序webview方面的问题，但我并不会讲小程序的webview原理，而我主要想讲的是小程序内如何嵌入H5。 那么好多同学会想了，不就是用web-view组件就可以嵌入了吗，是的，如果咱们的小程序和H5的业务比较简单，那直接用webview接入就好了，但我们公司的h5除小程序之外，还运行在转转app、58app、赶集app等多个端，如何能实现一套代码在多端运行，这是我今天主要想分享的，因此今天分享更适合h5页面比较复杂，存在多端运行情况的开发者，期待能给大家提供一些多端兼容的思路。 下面我先跟大家介绍下今天演讲主要的提纲。 小程序技术演进 webview VS 小程序 h5多端兼容方案 小程序sdk设计 webview常见问题 1 转转小程序演进过程 相信在座的很多同学的产品跟转转小程序经历了类似的发展过程，我们转转小程序是从去年五月份开始开发的，那时候也是小程序刚出来不久，我们就快速用原生语法搭建了个demo，功能很简单，就是首页列表页详情页。 然后我们从7月份开始进入了第二个阶段，这时候各种中大型公司已经意识到了，借助微信的庞大用户群，小程序是一个很好的获客渠道，因此我们也从demo阶段正式的开始了小程序开发。 那时候我们整个团队从北京跑到广州的微信园区里面去封闭开发

小程序包含一个描述整体程序的 app 和 多个描述各自页面的 page，它的主体部分由 app.js 、 app.json 和 app.wxss 三个存放在项目根目录的文件组成，而小程序具体的页面由 js 、 wxml 、 json 、 wxss 四个存放在相应页面目录的文件组成。 像 导航栏标题文字内容 这些我们按照实际的需求去具体设置，比如如果需要对微信小程序进行 全局配置 ，我们就在小程序根目录下 app.json 文件里设置，如果只是对本页面的窗口设置可以直接在页面目录下 json 文件进行配置，另外我们还可以在相关的 js 文件里调用 wx.setNavigationBarTitle 方法动态设置导航栏标题。 1. 全局配置 当需要微信小程序进行 全局配置 导航栏标题时 // 在根目录 app.json 里设置 navigationBarTitleText { "window" : { "navigationBarTitleText" : "设置 全局 导航栏标题文字" } } 2.页面配置 直接需要指定 页面配置 导航栏标题时就到页面对应的目录下的 json 文件设置就好了 { "navigationBarTitleText" : "设置 指定页面 导航栏标题文字" } ps: 页面配置中相关设置对应全局配置 app.json 中 window 对应的配置项

微信开发者开发工具的组成 菜单栏 工具栏 预览 描述二维码 自动预览 切后台 模拟器 编译器 调试器 1.项目结构 对比： web页面： 技术栈： html 从语义化的角度来描述页面结构 css 从审美的角度来美化页面 js 从交互的角度来提升用户体验 小程序页面 技术栈： wxml 描述微信页面的结构 wxss 描述微信页面的样式 js 书写微信的逻辑代码 json 配置页面的相关信息 组成 pages：管理当前小程序中所有的页面 index index.wml index.js 注意点： 所有的代码都是写在 Page({ }) index.wxss index.json 注意点： 如果没有内容，必须添加一个空对象 app.json：注册小程序中的页面 小技巧 快速创建一个页面 在 app.json 中的 pages 下添加一个路径，直接保存，可以自动生成对应的页面 设置项目的默认首页 在 app.json 中的 pages 将路径移到第一个元素中 来源： https://www.cnblogs.com/KoBe-bk/p/11423765.html

在当前页面做图片点击放大，点手机返回键，会退出当前页面，体验非常不好。 这种情况，我们只需要欺骗一下浏览器的历史地址记录即可。方法如下： <script type="text/javascript"> function toAnother(obj){ window.history.pushState(null, null, "/profile/"); } </script> 通过往浏览器历史里新增了一个地址，这样我们点击手机返回键的时候，就会跳回到浏览器历史地址记录中上一个页面的地址，其实就是我们的当前页面。 这样，点击返回键之后，我们还停留在本页面，客户体验非常好。 来源： CSDN 作者： xiaohe6688 链接： https://blog.csdn.net/xiaohe6688/article/details/51557384

在使用 window.location.href 进行 页面跳转或者react内部项目使用 this.props.history.push进行页面跳转时，做好的h5页面放在微信里，底部会出选前进后退的按钮，如下图： 废话不多说，解决问题： 第一种情况：如果只是页面之间跳转，使用window.location.replace 代替window.location.href ，亲测有效 第二种情况：react项目内部页面跳转使用 this.props.history.replace 代替 this.props.history.push 第三张情况：vue项目内部页面跳转使用 this.$router.replace 代替 this.$router.push 来源： https://www.cnblogs.com/lixz/p/11400160.html

解决方案：给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶部，并且需要加定时器，否则偶尔会失效 //blur失去焦点事件 $( "input,select,textarea" ).blur(function(){ setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); }) 注：scrollTo(xpos,ypos) xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 来源： https://www.cnblogs.com/fandong1314/p/11356082.html

前言 微信支付时，当调用微信支付的时候，微信会判断当前页面和微信公众号后台设置的支付授权目录是否一致，他会把页面最后一次刷新的url作为判断依据（如果用户刷新了任何页面，这个页面就是支付页面），这个时候，单页应用的路由中‘#’后面的内容也会被传递过去，在微信的判断流程里，这个url和设置的目录是不匹配的，因为涉及到多个页面都会发起支付请求，所有设置多个带页面参数的url是不合理的，所以这里在‘#’前面添加了‘?’，让微信忽略‘?’后面的内容。 设置支付目录 支付根目录 http : / / www . paytest . com / app / 支付页面 http : / / www . paytest . com / app / # / pay1 http : / / www . paytest . com / app / # / pay2 http : / / www . paytest . com / app / # / pay3 解决方式 当我在’#‘前面添加’?’,这个时候微信会把’?‘后面的内容当做参数而vue可以识别’?#’,这样既可以避免出现出现提示当前页面url未注册的错误在视图加载后，修改url（这样不会触发页面重新加载，其他框架也可做类似处理） 解决代码 mounted ( ) { if ( window . location . href . indexOf