preface
With the emergence and popularity of Wepy and MPvue, developing mini programs becomes more and more convenient and powerful. As members of the gay community, we all need to share our problems and how to solve them with each other, so as to help more friends (Ji). If there are insufficient places to write, please put forward valuable suggestions.
A brief introduction to wechat small program
As we all know, small program is a kind of application that can be used without downloading and installing, it realizes the dream of application “at your fingertips”, users can scan or search to open the application. It’s also a “go and go” concept, so users don’t have to worry about installing too many apps, so it’s easy to develop.
- Development technology: WXML (HTML5), WXSS (CSS), JavaScript
- Development tools: VScode (you can use the following frameworks for development), wechat developer tools
- Development idea: MVVM, in simple terms, this is a door front-end developers from the tedious steps of DOM operation out of the data automatically update the interface technology.
- Development process: this we can see the official documents, download and install development tools after the use of appID can be developed. Small procedure simple tutorial
- Development units: RPX, PT, REM, etc., specific here will not be introduced
- Development framework: here introduces several small procedures of the framework, weui, WEpy, MPvue and so on, interested students can go to understand
As a front end battlefield engineer, naturally not step on thunder, and do not use the framework component development to manually cut the page a little sad ~~ here I share a few of their own with native micro channel small program development encountered pit,
1. Wx. ShowModal of wechat applet
[bug Mc-10868] – There is a small pit when setting the font color for confirm/ Cancel properties.
<view bindtap="test"> <text> test </text> </view>test(e) {
wx.showModal({
content: 'test',
cancelColor: 'red',
confirmColor: 'RGB (0, 255)})}Copy the codeThe code looks fine on the simulator, and the two buttons do change color. But a look on the phone, dumbfounded
The original color values of these two buttons only support hexadecimal.
Js code:test(e) {
wx.showModal({
content: 'test',
cancelColor: '#FF0000',
confirmColor: '#FF0000'})}Copy the codeThe two buttons now appear on the phone, and the colors are changed.
2. Navigator jump of wechat mini program
<navigator hover-class="none" url="/pages/index/index">
<image src="/libs/images/home.png"></image>
</navigator>
Copy the codeAfter carefully checking the correct path and the correct typing of letters, the problem stuck. After half an hour, I finally found that there was a hole that I would step on if I wasn’t careful enough.
Those of you who use the Wx. SwitchTab interface may not have encountered this situation. NavigateTo navigateToMiniProgram (wX. NavigateTo) navigateToMiniProgram (wX. NavigateToMiniProgram) navigateToMiniProgram (WX. NavigateToMiniProgram) navigateToMiniProgram (WX. NavigateToMiniProgram) If you are smart enough, you can already see the problem. Yes, the main page to jump to is a tabBar page, which is not possible by default. Solutions:
<navigator hover-class="none" open-type="switchTab" url="/pages/index/index">
<image src="/libs/images/home.png"></image>
</navigator>
Copy the codeAdd an open-type=”switchTab” or bind a click event using the Wx. switchTab interface.
3. Scroll-x of wechat applets
- Set the width of the scroll-x and set the white-space: nowrap property // the content is not newline
- Display: Inline-block = display: inline-block = display: inline-block = display: inline-block = display: inline-block = display: inline-block = display: inline-block
4. Use the swiper and input components together
Question: If you place an input component into a swiper component, the swiper component will overwrite the input component, while the placeholder properties in the input component will be transparent, which will not affect the input function, but will affect the display effect of the input property. That is, it affects the visual effect. Effects on the simulator:
The effect on the phone
<view class="hd">
<input class="input" placeholder="Search for products, 9,803 great items." bindtap="entrySearch" disabled />
<swiper class="receive">
<swiper-item >
<navigator url="/pages/index/receive/receive" hover-class="none">
<image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
</view>
Copy the code.input {
position: absolute;
left: 30rpx;
top: 10rpx;
box-sizing: border-box;
width: 690rpx;
height: 56rpx;
border-radius: 45rpx;
border: 1rpx solid # 000; // Verify your guess
background-color: #fff;
box-shadow: 0 0 1rpx #ccc;text-indent: 185rpx; The font - size: 0.8 rem; } .receive { height: 380rpx; } .receive_img { width: 750rpx; height: 380rpx; }Copy the codeWe can see that the display is normal on the simulator, but it becomes a square box on the phone. I started to check the problem, and I guess it is overwritten? I added border: 1rpx solid #000; This line of code, after the refresh found that the black border came out and immediately disappeared, sure enough! It’s covered with absolute GPS.
Solution: Add z-index:2 to the input component. Of course, a view box is recommended for the Input component. Code:
<view class="hd">
<view class="inputSearch">
<input class="input" placeholder="Search for products, 9,803 great items." bindtap="entrySearch" disabled />
</view>
<swiper class="receive">
<swiper-item >
<navigator url="/pages/index/receive/receive" hover-class="none">
<image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
</view>
.inputSearch {
position: absolute;
left: 30rpx;
top: 10rpx;
box-sizing: border-box;
width: 690rpx;
height: 56rpx;
border-radius: 45rpx;
z-index: 2;
background-color: #fff;
box-shadow: 0 0 1rpx #ccc; } .input { text-indent: 185rpx; The font - size: 0.8 rem; } .receive { height: 380rpx; } .receive_img { width: 750rpx; height: 380rpx; }Copy the code
5. Scroll into view of wechat applets
Here’s one way to do it. You can either make a mock out of easyMock and import it into wx.request, or you can put it into a JS file and import it. I won’t go into details here. At the beginning, I thought I was going to use two scroll views, and I was going to use the scroll into view property to achieve the effect of left and right association scrolling
Code:
<view class="main">
<scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
<view class="cate-list {{curIndex==index? 'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
<text>{{item.name}}</text>
</view>
</scroll-view>
<scroll-view scroll-y class="menu-right" scroll-into-view="{{toView}}">
<block wx:for="{{detail}}" wx:key="{{item.id}}">
<scroll-view class="cate-box" id="{{item.id}}" scroll-y>
<view class="cate-banner" bindtap="bannerDetails">
<image src="{{item.banner}}"></image>
</view>
<view class="cate-title">
<text>{{item.title}}</text>
</view>
<view class="cate-product">
<view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
<image src="{{product.thumb}}"></image>
<view class="product-list-name"> < text > {{product. Name}} < / text > < view > < view > < view > < / scroll - view > < block > < / scroll - view > < / view > / / CSS code is not to put, There's a lot of manual stroking, In case of need to take in making / / js code switchCategory (e) {the console. The log (e) enclosing setData ({toView: urrentTarget of e.c. with our fabrication:. The dataset. Id})},Copy the code
<view class="main">
<scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
<view class="cate-list {{curIndex==index? 'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
<text>{{item.name}}</text>
</view>
</scroll-view>
<swiper vertical="true" class="menu-right" current="{{toView}}" >
<swiper-item wx:for="{{detail}}" wx:key="{{item.id}}">
<scroll-view class="cate-box" id="{{item.id}}" scroll-y>
<view class="cate-banner" bindtap="bannerDetails">
<image src="{{item.banner}}"></image>
</view>
<view class="cate-title">
<text>{{item.title}}</text>
</view>
<view class="cate-product">
<view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
<image src="{{product.thumb}}"></image>
<view class="product-list-name"> < text > {{product. Name}} < / text > < view > < view > < view > < / scroll - view > < / swiper - item > < / swiper > < / view > / / js code switchCategory(e) { console.log(e) this.setData({ curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0, toView:e.currentTarget.dataset.index, }) },Copy the code6. Wechat mini program shopping cart left swipe delete function
Here I give a way to achieve a shopping cart goods left slide to delete the method, for everyone’s reference, directly put code demo code:
wxml:
<view class="{{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{lists}}" wx:key="{{index}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
<view class="content">{{item.tt}}</view>
<view class="del" catchtap="del"</view> </view> WXSS:.del {background-color:#b4282d;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;-webkit-transform: translateX(90px); transform: translateX(90px); - its - the transition: all 0.4 s; The transition: all 0.4 s; } .content {float: left; width: 100%; margin-right:0; - its - the transition: all 0.4 s; The transition: all 0.4 s; -webkit-transform: translateX(90px); transform: translateX(90px); margin-left: -90px; display: flex; } .touch-move-active .content, .touch-move-active .del { -webkit-transform: translateX(0); transform: translateX(0); }Copy the codeJs part data: {lists: [{tt:'test',
isTouchMove: false
},
{
tt: 'test',
isTouchMove: false
},
{
tt: 'test',
isTouchMove: false
},
{
tt: 'test',
isTouchMove: false},]}, // calculate the hand slide Angle function Angle:function(start, end) {var _X = end.x - start.X, _Y = end.y - start.Y // return Angle/math.atan () returns the arctangent of the numberreturn360 * Math.atan(_Y / _X) / (2 * Math.PI); }, touchStart (e) {// Start touch when reset all delete this.data.lists. ForEach (function (v, i) {
if(v.istouchMove)// OnlytrueThe v.i sTouchMove =false; }) this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY, lists: This.data.lists})}, // Slide event handling touchmove(e) {letindex = e.currentTarget.dataset.index; // Current indexletstartX = this.data.startX; // start X coordinateletstartY = this.data.startY; // start the Y coordinatelettouchMoveX = e.touches[0].clientX; // Slide to change coordinateslettouchMoveY = e.touches[0].clientY; // Slide change coordinates // get slide Anglelet angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
this.data.lists.forEach((v, i)=> {
v.isTouchMove = false// Slide more than 30 degreesreturn
if (Math.abs(angle) > 30) return;
if (i == index) {
if(touchMoveX > startX) // Right-click V.istouchMove =false
else// Swipe left, v.istouchMove =true}}) // Update data this.setdata ({lists: This. Data. Lists})}, del (e) {/ / delete events. This data. The lists. The splice (urrentTarget of e.c. with our fabrication:. The dataset. The index, 1) enclosing setData ({lists: this.data.lists, }) },Copy the codeYou can modify it according to your own needs. Put down the renderings
7. Wechat mini program shopping cart
Shopping cart page logic is based on business requirements. Here I provide a simple shopping cart logic demo, novice can look at the shopping cart function.
conclusion
The author stepped on a lot of pits, here only write a few, if you use the framework will be more convenient, as a front-end engineer, or have to often step on pits, to get the opportunity to advance ~ the first time to write an article, please give the novice a little more encouragement, give the engineer a little more love, Give it a thumbs up – leave a comment before you go
