小程序絕對定位

① 微信小程序定位許可權開啟或關閉怎麼控制

微信小程序定位許可權開啟或關閉步驟如下：

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長度來判斷指數，進行縮放或者移動的處理。

下面寫監聽點擊了座位的事件，並拋出外部數據

以上基本已經完成了座位表的功能，不過有一個缺點，不能根據指定縮放位置縮放