【微信小程式開發教程】選單內容左右聯動 & MD5加密
1****、****微信小程式****選單內容左右聯動
小程式無法獲取元素的寬高,位置資訊,只能通過後臺計算,但是存在較大的機器誤差,不知有啥好的解決方案?

如圖所以,左側是選單欄,右側是主體內容,點選左側選單,右側滑動到相應的位置;右側滑動過程,也會改變左側選單的選中狀態。本人的實現方案:
所有元素大小單位用rpx;
通過scrollbind(e) 的 e.detail.scrollHeight獲取右側滑動區域的總高度(單位px)
通過物品高度和標題高度的比值,計算出各自的實際高度(單位px)
通過修改scrollTop(單位px)改變主體內容位置
這樣還是存在1px-100px的誤差,物品越多,後面的累計誤差會越大,有沒有更好的解決辦法呢?
答:測試了一下,的確用scroll-view的scroll-to-view特性可以解決:
wxml****中修改:
js****檔案中修改:
page data中增加:
menuType:['food','dust','bowl','cages','toys','tools'],toView:'cages',
然後把下面函式修改一下:
selectMenuAct: function (e) {
//typenamevar id = e.target.dataset.id;var tType=this.data.menuType[id];
console.log(e),this.setData({
scrollNum: id,
toView: tType
//scrollTop: this.data.heightList[id]
});
},
測試環境下通過。
scroll-into-view值應為某子元素id(id不能以數字開頭)。設定哪個方向可滾動,則在哪個方向滾動到該元素。
2****、微信小程式****MD5****加密
一般很多語言都有MD5加密的庫。
如果你指的是資料加密,怕資料明文不安全,我建議使用base64 + 一些字首或者字尾進行加密,然後將資料傳到伺服器,伺服器再進行解密後去掉這些前字尾。比如,明文是abc,你可以加一下字首,變成123abc,然後加密成為MTIzYWJj再發出去,然後再解密就行了。
一般MD5加密是不可逆的。而base64可以編碼解碼,如下:
package main
import (
"fmt"
"github.com/hunterhug/GoSpider/util"
)
func main() {
s := "abc"
prefix := "123"
base64e := util.Base64E(prefix + s)
fmt.Println("加密:" + base64e)
fmt.Println("再解密:" + util.Base64D(base64e))
}
結果
加密:MTIzYWJj
再解密:123abc
百度百科介紹:Base64編碼可用於在HTTP環境下傳遞較長的標識資訊。例如,在Java Persistence系統Hibernate中,就採用了Base64來將一個較長的唯一識別符號(一般為128-bit的UUID)編碼為一個字串,用作HTTP表單和HTTP GET URL中的引數。在其他應用程式中,也常常需要把二進位制資料編碼為適合放在URL(包括隱藏表單域)中的形式。此時,採用Base64編碼不僅比較簡短,同時也具有不可讀性,即所編碼的資料不會被人用肉眼所直接看到。
我的Golang語言自己封裝的加密庫一般是這樣的:
/*
Copyright 2017 by GoSpider author.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
package util
import (
"crypto/hmac"
"crypto/md5"
"crypto/sha256"
"encoding/base64"
"encoding/hex"
"fmt"
"net/url"
"strings"
)
// HMAC with the SHA256 http://blog.csdn.net/js_sky/article/details/49024959func ComputeHmac256(message string, secret string) string {
key := []byte(secret)
h := hmac.New(sha256.New, key)
h.Write([]byte(message))
return base64.StdEncoding.EncodeToString(h.Sum(nil))
}
// create md5 stringfunc Strtomd5(s string) string {
h := md5.New()
h.Write([]byte(s))
rs := hex.EncodeToString(h.Sum(nil))
return rs
}
func Md5(str string) string {
return Strtomd5(str)
}
// 字串base64加密func Base64E(urlstring string) string {
str := []byte(urlstring)
data := base64.StdEncoding.EncodeToString(str)
return data
}
// 字串base64解密func Base64D(urlxxstring string) string {
data, err := base64.StdEncoding.DecodeString(urlxxstring)
if err != nil {
return ""
}
s := fmt.Sprintf("%q", data)
s = strings.Replace(s, "\"", "", -1)
return s
}
//url轉義func UrlE(s string) string {
return url.QueryEscape(s)
}
//url解義func UrlD(s string) string {
s, e := url.QueryUnescape(s)
if e != nil {
return e.Error()
} else {
return s
}
}
現在大部分站點都開啟https來保證資料安全。
相關文章
- 微信小程式-能左右滑動的訂單列表微信小程式
- 微信小程式開發教程微信小程式
- 小程式外賣專案實踐之-左右選單聯動
- 微信小程式開發系列教程三:微信小程式的除錯方法微信小程式除錯
- 微信小程式實現卡片左右滑動效果微信小程式
- 微信小程式開發之大神之路最全微信小程式開發教程(視訊+精品文章)微信小程式
- 微信程式開發系列教程(四)使用微信API建立公眾號自定義選單API
- 微信小程式開發微信小程式
- 微信小程式之簡單開發操作(一)微信小程式
- 微信小程式開發小記微信小程式
- 微信小程式下拉選單自定義元件微信小程式元件
- 微信小程式開發2微信小程式
- 【小程式】微信小程式開發準備微信小程式
- 如何選擇微信小程式開發框架?2018年更新微信小程式框架
- 使用mpvue開發微信小程式Vue微信小程式
- 微信小程式開發--『狗蛋TV』微信小程式
- 開發微信小程式的作用微信小程式
- 微信小程式雲開發6微信小程式
- 微信小程式開發神器-Grace微信小程式
- 微信小程式開發精講微信小程式
- 微信小程式藍芽開發微信小程式藍芽
- 微信小程式開發總結微信小程式
- 微信小程式實現多摺疊展開酷炫選單微信小程式
- 【微信小程式開發】梔子手作花花微信小程式商城開發最佳實踐微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式開發系列二:微信小程式的檢視設計微信小程式
- 微信小程式開發風口下,微信小程式該如何運營?微信小程式
- 微信小程式教程01:小程式簡介微信小程式
- 微信小程式入門教程微信小程式
- 2020年最新H馬vue開發微信小程式影片教程Vue微信小程式
- 微信小程式--手寫一個地區選擇器(多級聯動)微信小程式
- 微信小程式--聊天室小程式(雲開發)微信小程式
- Vue實現左右選單聯動實現(更新)Vue
- 微信開發:wx_sample.php內容詳解PHP
- 微信公眾號開發5-自定義選單-微信開發phpPHP
- 微信小程式開發(持續更新)微信小程式
- 微信小程式開發注意事項微信小程式
- 微信小程式學習:雲開發微信小程式
- 微信小程式開發初體驗微信小程式