微信页面

一、微信小程序-全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性： 1.pages:配置页面路径列表（添加新页面） 在微信开发中工具中自带的编辑器里面为pages数组添加新的路径，微信开发者工具会自动为其创建对应的文件目录。 配置示例： { “pages”: [ “pages/index/index”, “pages/home/home”, “pages/kind/kind”, “pages/cart/cart”, … … ], } 2.window：配置全局默认窗口表现 用于设置小程序的状态栏、导航条、标题、窗口背景色等。 navigationBarBackgroundColor 导航栏背景颜色，如 #000000 navigationBarTextStyle 导航栏标题颜色，仅支持 black / white navigationBarTitleText 导航栏标题文字内容 backgroundColor 窗口的背景色 backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light enablePullDownRefresh 是否开启全局的下拉刷新。 配置示例： { “window”: { “navigationBarBackgroundColor”: “

A类问题 1 请谈谈微信小程序主要目录和文件的作用？ project.config.json 项目配置文件，用得最多的就是配置是否开启https校验； App.js 设置一些全局的基础数据等； App.json 底部tab, 标题栏和路由等设置； App.wxss 公共样式，引入iconfont等； pages 里面包含一个个具体的页面； index.json (配置当前页面标题和引入组件等)； index.wxml (页面结构)； index.wxss (页面样式表)； index.js (页面的逻辑，请求和数据处理等)； 2 请谈谈wxml与标准的html的异同？ 都是用来描述页面的结构； 都由标签、属性等构成； 标签名字不一样，且小程序标签更少，单一标签更多； 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览 组件封装不同， WXML对组件进行了重新封装， 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。 3 请谈谈WXSS和CSS的异同？ 都是用来描述页面的样子； WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改； WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx； WXSS 仅支持部分 CSS

微信公众号开发进入页面A，如上图； 点击“查看做题结果”，进入虚拟页面B（页面B是覆盖在页面A上的fixed页面），如下图： 希望在页面B点击返回，不是直接退出，而是返回页面A，在页面A点返回才是退出。 //点击“查看做题结果”，打开页面B vm.startPaper = function() { ...你的事件处理... vm.doingPaper = true; pushHistory(); }; //关闭页面B，返回页面A，需要执行的事件 vm.goHome = function() { ...你的事件处理... vm.doingPaper = false; }; ////监听popstate事件 var state = {}; window.addEventListener("popstate", function(e) { //popstate监听返回按钮 if(vm.doingPaper){ window.location.href = state.url; vm.doingPaper = false; $timeout(function(){ vm.goHome(); },100) }else{ WeixinJSBridge.call('closeWindow'); } }, false); function pushHistory() { state = {

rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以 根据屏幕宽度进行自适应 ，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案： 响应式（ Responsive web design ) rem 流式布局 scale伸缩布局 响应式 响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。 rem rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是 通过rem把页面按比例分割 达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的 rem布局demo ，通过设置 document.documentElement.style.fontSize = window.innerWidth + 'px'; 然后设置 <div class="box"></div> 的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。 流式布局 流式布局需要用到百分比或者flex

引： 什么是小程序 微信小程序是一种不需要下载也不需要安装就可以使用的应用程序，它把app的功能集成到小程序里面，然后用户就可以在微信里面实现app的基本功能。 小程序的优势 不用去装一些不常用app，直接在微信中就可以实现 初创公司开发app成本更低 微信成为了app前期推广的重要入口 环境搭建 账号注册 首先需要申请一个微信公众平台账号 立即注册>小程序>填写资料>注册 链接： 微信公众平台 在注册成功后注意保留自己的appid 下载开发者工具 链接： 开发者工具下载 创建项目 目录文件介绍 pages：存放小程序中每个页面的文件夹 index：小程序中的单独页面，每个页面由四个部分组成： .js：页面逻辑代码(js) wxml：页面结构(html) json：页面配置 wxss：页面样式表(css) app.js：小程序全局逻辑 app.json：小程序公共配置 app.wxss：小程序公共样式表 开发小程序 全局配置 app.js文件： { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText":

login.wxml 大体框架 login.js 接受输入数据 login.wxss 页面美化 1个像素 等于两个rpx ctrl + S 自动编译 1 登陆页面的搭建（wxml） 1.1 view容器的使用 1.2 input的使用 1.3 button的使用 2 登录页面的美化(wxss) 2.1学习样式类的创建 2.2 学习flex布局 2.3 样式的一些基础属性 3 登录页面的完善 3.1 json文件的使用 3.2 获取输入框的文本 3.3 使用wx.request 发起网络请求 3.4 完成登录按钮的事件 4 主页面的初步搭建 4.1 搭建主页 index.wxml 4.2 使用tabbar组件 4.3 登录后跳转到主页 4.4 使用图标 来源： CSDN 作者： NLP大牛 链接： https://blog.csdn.net/qq_30400105/article/details/104097559

转载： 原文 　　过去开发中遇到过很多这种情况，页面底部需要固定定位一个按钮，广告栏或者菜单栏，页面中有表单项需要填写，在打开手机虚拟键盘的时候，底部固定定位的元素会处在软键盘上方，把本来就所剩无几的页面几乎都挡住了（一般发生在不使用框架的单独页面中），而浏览器并没有为开发者提供呼出软键盘的事件监听方法。 　　之前我的解决方法是 1 2 3 4 5 6 7 8 9 window.onresize = function (){ if (document.body.clientHeight<500){ document.getElementById( '底部元素id' ).style.display = 'none' ; } else { if (document.getElementById( '底部元素id' ).style.display == 'none' ){ document.getElementById( '底部元素id' ).style.display = 'block' ; } } } 　　 　　当用户呼出软键盘时，页面会触发resize事件，页面大小变小，高度只有原有高度减去键盘高度的高度，一般都小于500， 同时市面上也几乎没有屏幕原有高度就小于500的手机，所以在resize触发后判断，如果document.body.clientHeight<500

问题描述 当我们想实现点击某些东西后直接返回前一个页面或者前几个页面时，我们可能也会需要带着一些参数返回。 这一问题的解决可以有很多种方法， 比如： 使用本地缓存wx.setStorage,wx.getStorage,wx.removeStorage。 使用wx.navigateTo 但是，缓存太麻烦；navigateTo方法又会导致刷新整个前面的页面，先前填写的数据会被刷新成初始状态。 所以，网上查阅资料后，就有了下面的方法， 实现的效果： 上一个页面的js部分内容： data:{ goodType: "", goodTypeImgUrl: "" } 当前页面的js部分内容: onTapped: function(e) { //console.log(e.currentTarget.dataset) let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。 let previousPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。 previousPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。 goodType: e

一、小程序代码构成 .json 后缀的 JSON 文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 JSON 配置 JSON是一种数据格式，在小程序中，起静态配置的作用。 小程序配置 app.json app.json 是当前小程序的 全局配置 ，QuickStart项目中的 app.json 配置内容如下： { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } pages 字段——用于描述当前小程序所有页面路径，为了让wx客户端知道小程序页面定义在哪个目录 window 字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等 工具配置 project.config.json 工具上做的任何配置都会写入到这个文件，重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会恢复到当时开发项目时的个性化配置，括编辑器的颜色

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 如果有些页面结构内容需要重复在不同页面显示，则可以创建模板，在不同页面引用。 模板虽然是相同的，但页面传的参数值可以不同，所以可以在模板中显示不同信息。 定义模板 使用name属性，作为模板的名字。然后在内定义代码片段，如 < template name = " msgItem " > < view > {{msg}} </ view > < view > {{stu.name}}--{{stu.id}}--{{stu.sex}} </ view > </ template > is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板： < template name = " odd " > < view > odd </ view > </ template > < template name = " even " > < view > even </ view > </ template > < block wx: for = " {{[1, 2, 3, 4, 5]}} " > < template is = " {{item % 2 == 0 ? ' even ' : ' odd ' }} " /> </ block > 模板的作用域 使用 is 属性