小程序绝对定位

① 微信小程序定位权限开启或关闭怎么控制

微信小程序定位权限开启或关闭步骤如下：

1、打开微信，点击“发现”按钮，点击其中的小回程序，找答到想要拒绝定位的微信小程序，点击打开；

② 微信小程序模拟点击input框获取用户手机号

       最近在做一个小程序时遇到这样一个需求：要求在点击input框时获取用户的手机号还可以进行修改。但是我们都知道微信小程序获取手机号是通过button按钮的bindgetphonenumber属性来实现的，那么怎么能在input获得焦点时，获取用户手机号呢？

       首先，我们先来了解一下怎么通过button按钮来获取用户的手机号。在微信公众平台上，button按钮有一个open-type和bindgetphonenumber的属性：

           具体如下：

                1.wxml:

                    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">输入手机号</button>

                2.js

                    在这里我们需要注意首先要获取用户的openid和session_key,获取方式如下：

                        app.js:

                        wx.login({

                              //获取code

                              success: (res) => {

                                    var code = res.code; //返回code

                                    this.globalData.code = code;

                                    this.globalData.appId = 'wx5a9ded8ac4b1feb3';

                                    this.globalData.secret = '';

                                    wx.request({

                                          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + this.globalData.appId + '&secret=' + this.globalData.secret + '&js_code=' + code + '&grant_type=authorization_code',

                                          data: {},

                                          header: {

                                                'content-type': 'json'

                                          },

                                          success: (res) => {

                                                    var openid = res.data.openid //返回openid

                                                    this.globalData.openId = openid;

                                                    this.globalData.session_key = res.data.session_key;

                                                    wx.request({

                                                              url: this.globalData.req_url + '/WechatUser/dealUserMsg',

                                                              method:'post',

                                                              header: { 'content-type': 'application/x-www-form-urlencoded' },

                                                              data:{

                                                                        openId:openid

                                                              },

                                                              success:res=>{

                                                                        console.log(res);

                                                              }

                                                    })

                                              }

                                    })

                              }

                    })

                index.js:

                     // 点击按钮获取手机号

                  getPhoneNumber(e) {

                        wx.request({

                              url: appData.req_url + '/WXCore/decrypt',

                              data:{

                                    openId: appData.openId,

                                    encryptedData: e.detail.encryptedData,

                                    sessionKey: appData.session_key,

                                    iv: e.detail.iv

                              },

                              header: {

                                        'content-type': 'json'

                                },

                              success: res => {

                                    this.setData({

                                            inputShow: true

                                    })

                               if(!res.data.res){

                                      console.log('未绑定手机号');

                                }else{

                                      this.setData({

                                            phoneNumber: res.data.bindPhone

                                      })

                                }

                          }

                    })

              },

            结果如下：

                    

            点击允许，这个时候后台会对传过去的数据进行解密（具体度娘搜索微信小程序手机号码解密），就会将手机号码返回。

            ok，通过button我们成功的拿到了手机号码，那么怎么能在input框获取焦点时拿到手机号码，并且可以修改呢？

            经过a long long time的思考，终于想出了一个土办法。那就是将一个button标签和一个input框通过绝对定位重叠在一起，然后将button标签做成input框的样子，在我们第一次点击的时候成功获取到手机号以后，将button标签通过标志位隐藏，而让input标签显示，并将拿到的手机号码赋给input的value值，如此便可以实现模拟input框获得焦点时获取用户的手机号！！！

            

            虽然土，但是成功将效果实现了不是？

            最后给大家和我自己送上一份心灵鸡汤：

                    你想要的永远和你付出的成正比。

③ 微信小程序中使用swiper禁止用户上下滑动且不影响外部界面的滑动

给swiper设置class，并且给它相对定位，给class::after绝对定位，因为swiper-item自带绝对定位

在swiper-items中添加catchtouchmove方法，但是在这个方案中，（注意：：：：）在手指触摸swiper这一块时，外部界面时无法进行滚动的！

④ 手机没打开位置,小程序能定位位置吗

不能。小程序是通过手机定位进行确定位置的，因此没打开是不能定位的。小程序是一种不需要下载安装即可使用的应用，实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

⑤ 小程序微信商品列表的左右联动

先前看到网上不少大神写的demo，其菜单栏主要以 A,B,C,D等字母为主，即A,B,C,D等字母为对应该项携带的 id（id不能为汉字或纯数字）。而笔者现在写的项目菜单栏为汉字，所以需要改变数据格式，进而需要改变 wxml 中的循环嵌套和获取。以下为成型后效果，希望对读者有帮助。

实现该功能的思路：通过点击左侧滑栏的某一项，获取到该元素携带的 id ，然后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。

以下为完整数据

数据格式：

/* pages/listers/listers.wxss /
/ pages/list-1/list-1.wxss */

/ 总体主盒子 /
.container {
position: relative;
width: 100%;
height: 1220rpx;
background-color: #f0f4f7;
color: #939393;
}

/ 左侧栏主盒子 /
.nav_left{
/ 设置行内块级元素（没使用定位） /
display: inline-block;
width: 100%;
height: 100%;
/ 主盒子设置背景色为灰色 /
background: #fff;
text-align: center;
/* position: fixed; /
left: 0;
top: 0;
border-top: 1rpx solid #dedede;
}
/ 左侧栏list的item /
.nav_left .nav_left_items{
background: #fff;
/ 每个高30px /
height: 80rpx;
/ 垂直居中 /
line-height: 80rpx;
/ 再设上下padding增加高度，总高42px /
padding: 15rpx 0;
/ 只设下边线 /
border-bottom: 1px solid #dedede;
/ 文字14px /
font-size: 29rpx;
color: #101010;
font-weight:
}
/ 左侧栏list的item被选中时 /
.nav_left .nav_left_items.active{
/ 背景色变成白色*/
background: #f0f4f7;
color: #ed1000;
}

/ 右侧栏主盒子 /
.scroll_right{
/ 右侧盒子使用了绝对定位 /
position: fixed;
top: 0;
right: 0;
overflow: auto;
flex: 1;
/ 宽度75%，高度占满，并使用百分比布局 /
width: 75%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
background-color: #f0f4f7;
border-top: 1rpx solid #dedede;
}
.mink::after{
display:block;content:''clear:both;
}
.jiul,.jiul image{
width: 100%;
height: 170rpx;
}
.minl{
font-size: 29rpx;
color: #777;
text-align: left;
line-height: 60rpx;
float: left;
background: #f0f4f7;
width: 100%;
/* height: 50rpx; /
}
.mink{
width: 100%;
background: #fff;
height: 100%;
}
/ 右侧栏list的item /
.nav_right_items{
/ 浮动向左 /
float: left;
/ 每个item设置宽度是33.33% /
width: 50%;
/ height: 160rpx; /
text-align: center;
color: #4a4a4a;
background: #fff;
}
.nav_right_items image{
/ 被图片设置宽高 /
width: 60px;
height: 50px;
margin-top: 15rpx;
}
.nav_right_items text{
/ 给text设成块级元素 /
display: block;
margin-top: 5rpx;
margin-bottom: 10rpx;
font-size: 26rpx;
/ 设置文字溢出部分为... /
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/ * 自定义其他点击态样式类 **/
.other-navigator-hover{
background:#fff;
}

.scroll_left{
width:25%;
height:100%;
background:#fff;
text-align:center;
position: fixed;
left: 0;top: 0
}

⑥ 微信小程序之wxss文件使用变量动态计算参数值

一、需求：

swiper组件缩小后需要完全居中。

二、实现方案：

一种方式是flex居中，但我调试后效果不行；还有一种就是绝对定位，使用left 50%，这种我调试也不居中；还有一种就是计算屏幕宽度和swiper宽度，绝对定位后left=(屏幕width-swiper width)/2,本文介绍最后一种实现方式。

三、程序实现

3.1 js文件

data声明变量

onload时计算参数值

3.2 wxss文件

使用绝对定位，left使用变量，格式： var( --变量名--)

3.3 wxml文件

swiper外用一个view组件，并使用变量，格式：style="--left--:{{动态变量}}px"

四、实现效果

⑦ ios 小程序兼容问题(下拉刷新)

小程序下拉刷新步骤：

如需所有的页面都实现下拉刷新的话，那需要在全局文件app.json里的window里设置enablePullDownRefresh这个属性(与步骤1设置一样)。

完成以上步骤就可实现下拉刷新了~

ios端，页面无法下拉刷新(就是根本下拉不了，触发不了事件)。只有当右侧的滚动条滚动到底部后，再下拉刷新时才有效果。安卓端是没有问题的。
但是，开发者工具上测试一直都是没有问题的。

问题的原因：
是 因为在首页上父元素用到了绝对定位( position: fixed)，导致了ios端无法下拉刷新 ，把绝对定位改为相对定位就可以了(position: relative)。

⑧ 小程序: 三栏布局的五种实现方式及优缺点

浮动布局的优点就是比较简单，兼容性也比较好。
缺点是浮动元素是脱离文档流，要做清除浮动，否则可能会出现高度塌陷等问题。

绝对定位布局优点: 很快捷，设置很方便.
但是脱离文档流的, 可能会造成重叠元素

在flex布局不兼容的时候，可以尝试表格布局。

CSS基础（float属性与清除浮动）
三栏布局的5种解决方案及优缺点

⑨ wx-open-launch-weapp 样式问题

此前写过一篇文章： 关于 React 中使用 wx-open-launch-weapp 唤起微信小程序 。但针对该标签设置样式非常地蛋疼。

这篇文章主要介绍，如何在 <wx-open-launch-weapp> 写样式的踩坑过程（以 React 为例）。

由于在 <wx-open-launch-weapp> 添加样式会非常多的问题，可能各种不生效。

因此，我会这样去设计： container 为点击唤起小程序的区域（相对定位），而 content 则是该区域的展示内容， wx-open-launch-weapp 则是占满唤起区域（绝对定位）。

为什么要这样设计？后面的方案会给出答案。

当前这个需求，由于我的 content 只是一张图片，所以我的第一个想法是这样的。

将 <wx-open-launch-weapp> 宽高设为 100% ，我们先看下效果：

这时候只出现了紫色部分，且紫色部分点击也没有任何效果，不能唤起小程序。 然后，我想是不是 <script type="text/wxtag-template"> 未设置宽高的问题，将其设置为 100% 之后，效果一样均无效。

由于上一个方案流产之后，马上想到会不会是 100% 不生效，于是想着将宽高设置为具体值。如下：

效果如上，尽管 <wx-open-launch-weapp> 占满 container 的宽度。可高度。。。接着我尝试设为 {{ width: ƌ.9rem', height: 颼%' }} ，效果完全一致，高度仍无法占满 container 的高度。

我又想是不是 rem 单位问题，然后我又改为 {{ width: 鬊px', height: 餎px' }} 看看有什么不一样，但高度仍然如上图一样，可宽度倒是有变化。

无奈.jpg

到这里想吐了，我想着先解决 <wx-open-launch-weapp> 占满 container 的问题，暂时忽略 <script type="text/wxtag-template"> 的问题。

既然方案二尝试了各种可能性，无论怎么设置宽高仍不尽人意。于是采用 绝对布局 看看：

好像看到希望了， <wx-open-launch-weapp> 已经占满 container 了。

但是这时候 <script type="text/wxtag-template"> 的区域仍然没有展示出来，那我是不也要设为绝对布局呢，试试看：

效果如下：

好像快成功了，高度还是不对。其中紫色部分属于 <wx-open-launch-weapp> ，而粉红部分属于 <script type="text/wxtag-template"> 。所以点击粉红区域可以正常唤起小程序了。

然后，又想到将 top 设为 0 ，发现可以了。

为了兼容性，于是我谨慎地将 top 、 left 均设为 0 。

到这里，感觉可以收尾了。

回到文章开头的设计：

考虑到上面就一个宽高的问题，就那么难搞了。所以我想把页面元素与唤起小程序的区域分开来，是不是省心很多。

完整示例：

这个过程差点吐血，可喜的是可以愉快地唤起小程序了。

The end.

⑩ 小程序实现在线选座实战(中)

在实现选座组件前，我们这里先介绍一下，我们需要的座位表数据结果

其中x、y代表这个座位在整个座位表中的横轴和纵轴坐标，下面我们就针对这个数据结果展开实现这个选座组件

下面创建并且在init初始化模版:

这里还需要动态的计算 seatComponent 和 seat-container 的大小

在渲染座位前，我们先写一个 setData 方法来注入座位信息

通过 _getWrapperSize 方法算出最大x和y，然后根据容器的大小算出每一个座位占用的大小。绝对定位每一个座位，一个座位的left：“座位大小 座位的x+偏移量”，top：“座位大小 座位的y”，这样遍历整个座位列表我们就可以得到整个座位图:

接下去实现，拖动座位图和放大缩小功能:

这里监听容器的 touchstart 、touchmove 、touchend 判断e.touches.length长度来判断指数，进行缩放或者移动的处理。

下面写监听点击了座位的事件，并抛出外部数据

以上基本已经完成了座位表的功能，不过有一个缺点，不能根据指定缩放位置缩放