微信小程序

时间：2024-02-23 10:13:10

1.表单

1.1 input：必须用view包裹。

1.2 textarea：层级最高也需要view包裹，遇到弹窗的时候，要把他隐藏掉。

1.3 checkbox：设置大小使用zoom：大小%。

1.3 修改input,textarea,checkbox,radio,等标签样式：

checkbox：
checkbox .wx-checkbox-input{
border-radius: 50%;
width: 40rpx;
height: 40rpx;
}
radio:
radio.wx-radio-input{
border-radius: 50%;
width: 40rpx;
height: 40rpx;
}

 

1.4 图片预览问题（如何找到父元素的index下标。）

html：

<view wx:for="{{for}}" wx:for-index="index">

父元素

<view data-index="{{index}}">子元素</view>
</view>

js：
//图片预览
previewImage: function (e) {
var current = e.target.dataset.src;
//index是父元素所在的数组中的下标。
var index = e.currentTarget.dataset.index;
wx.previewImage({
current: current, // 当前显示图片的http链接 
urls: this.data.noteData[index].images// 需要预览的图片http链接列表 
});
},
点击子元素。
console.log(e.currentTarget.dataset.index)//父元素下标

 


1.5多选标签

点击当前标签使其state改变。
data:{
//标签数据
labelData:[{id:1,name:"我是一",state:"0"},{id:1,name:"我是一",state:"0"},{id:1,name:"我是一",state:"0"}]
//选中标签id
labelSelect:[]
}
// 多选标签
tabClick:function(res){
var index =res.currentTarget.dataset.key;
if (this.data.labelData[index].state==1){
this.data.labelData[index].state=0;
} else if (this.data.labelData[index].state==0){
this.data.labelData[index].state=1;
}
this.setData({
labelData: this.data.labelData,
});
},
},
// 确定选择的标签按钮
interesOkAjax:function(){
var that = this;
//将选择的标签存起来放进数组中。
for (let i = 0; i < that.data.labelData.length; i++) {
if (that.data.labelData[i].state == "1") {
that.data.labelSelect.push(parseInt(that.data.labelData[i].cate_id))
that.setData({
labelMask: false,
});
};
};
//如果这个数组是空的
if (that.data.labelSelect.length == 0) {
that.setData({
labelSelectMask: true
});
setTimeout(function () {
that.setData({
labelSelectMask: false
});
}, 500);
//否则有值时就将数组 传给后台。
}else{
wx.request({
url: \'https://shequ.chinawr.net/index.php/Api/Index/post_cate\',
method: "GET",
data: {
vip_id: that.data.vip_id,
cate_arr: that.data.labelSelect 
},
header: {
\'content-type\': \'application/json\' // 默认值
}, 
success: function (res) {
that.setData({
labelShow:res.data.cates
});
}
});
};
},

2.公司开发过程中 需要用到真正地址链接

1.首先在app.js设置

App({
globalData: {
userInfo: null,
domain:\'https://officialwebsite.dhkeji.cn\'
}
})

2.使用的时候要加上getApp().globalData
2.然后在请求的地址中就加上这个常量，例如：getApp().globalData.domian_full+\'/api/carousel/index\',

3.在新闻详情页中布局方面不要写死，灵活运用

<view wx:for=\'{{news_xq.content}}\' wx:key="id" wx:for-item="item" class=\'content\' >
<text class=\'cont\' wx:if="{{item.type==\'text\'}}">{{item.content}}</text>
<image class=\'cont_pic\' wx:if="{{item.type==\'img\'}}" src=\'{{item.content}}\'></image>
</view>

 


加判断是因为在什么类型的标签用什么内容，这样标签就不会乱。


4.后台请求到的轮播图

1.如果后台请求到了图片加上文档的wxml格式都没能显示出来，看看是不是样式问题。我遇到的就是最外层容器没有宽度。所以显示不出来。

5.下拉刷新

1.系统自带刷新样式wx.showNavigationBarLoading();wx.hideNavigationBarLoading();
2.complete: function (res) {}//无论失败成功的回调函数停止刷新wx.stopPullDownRefresh();
3.让页数回到第一页。

6.上拉加载

1.系统自带刷新样式wx.showNavigationBarLoading();wx.hideNavigationBarLoading();
2.**在加载过程中最好加个定时器请求，然后在底部写个正在加载缓冲定时器**。解决了我一个坑。快速上拉上不到底。
2.成功的回调：拼接页数。news: that.data.news.concat(res.data.data.list)

//拼接页数。并且判断，that.data.product_list是原有的数据。 判断当有数据时就显示数据，无数据就显示没有了。
uccess: function (res) {
if (res.data.data.list!=0){
that.setData({
product_list: that.data.product_list.concat(res.data.data.list),
hidden: true
})
}
else{
that.setData({
hidden: false
})
}

 

7.导航条操作
1.如果遇到单独的“全部”按钮，再加上其他类目的内容，比如，全部 餐饮 服装 酒店 ··· 因为不是在同一个标签内的元素，所以想要做选中高亮，可以给他们共同点击事件。

news.wxml
<view class="item{{currentTab==\'0\'? \' active\':\'\'}}" bindtap=\'click\' id="0">全部</view>
<view wx:for="{{product}}"wx:key="this" id="{{item.id}}" data-idx="{{index}}" class="item{{currentTab==item.id? \' active\':\'\'}}" bindtap=\'click\'>
{{item.cat_name}}
</view>
//共同的点击事件，共同的class类，然后定义“全部”id为0，

news.js
onLoad: function () {
//请求到的数据成功的回调函数中,让页面初始化时默认高亮
that.setData({
currentTab:0
})
}
//点击事件选中高亮，选中当前id高亮。
click:function(e){
this.setData({
currentTab:id
})

 

8.刷新时，只有用系统自带功能才能让三个小圆点的出现

1.在app.josn中windows{"backgroundColor":"#eee"}让背景颜色改为你需要的背景颜色。
2.在app.json中windows{"backgroundTextStyle":"dark"}让小圆点显示。
3.在app.wxss中给page{background-color":"#eee"}.
4.记得还要在相应的json中加上刷新属性："windows{enablePullDownRefresh":true}

9.做产品页时，遇到点击全部和点击各类的按钮时，因为请求的数据都不一样，这里要注意一下。

1.因为全部和各类都设置了相同的点击事件。给全部一个id为0；
2.点击的时候照样存数据拿数据。
3.设置回调that.setData({cat_id: e.currentTarget.id})把存进的id赋值给cat_id你想要的链接后面拼接的id。
4.然后请求数据时，要在链接后面加上你获取的id。例如： getApp().globalData.domain + \'/api/product/getProductList?cat_id=\' + that.data.cat_id,
5.因为有全部这个类目，所以页面初始加载的时候就会显示全部，所以在onLoad:function(){that.setData({cat_id:0)}所以请求的数据，getApp().globalData.domain + \'/api/product/getProductList?cat_id=0\'。后面直接等于0。

10.小程序tabBar底部的图片和字体都没办法设置大小，所以建议图片时81*81的此尺寸。这个尺寸是包括白边的，并不是图片内容时81*81.


**重点！！！**

11.头部导航条带给我的坑。
1.正常情况下在头部固定定位然后在里面写内容是没有问题的，但是诡异的事情出现了，我的内容会在苹果机上滑时会消失不见，在我苦苦研究下，终于被我发现问题。
2.一切都是样式搞的鬼。正常样式是这样的

.header{//scroll-view的样式
width: 100%;
height: 97rpx; 
background: #fff;
position: fixed;
z-index: 1000;
box-shadow: 0px 0px 5px 1px #ccc;
top: 0;
overflow-x: hidden;
white-space: nowrap;
font-size:0;
}
.item{
display:inline-block;
color: #999;
line-height: 97rpx;
padding-left: 20rpx; 
font-size: 32rpx;
}
```

3.看完是不是没什么问题。对是没什么问题，但是在苹果机上滑时就是不出来，你耐它何？
4.所以最后我发现是间距的问题，和display也改了。看代码。

```
.header{
width: 100%;
height: 97rpx; 
background: #fff;
position: fixed;
z-index: 1000;
box-shadow: 0px 0px 5px 1px #ccc;
top: 0;
overflow-x: hidden;
white-space: nowrap;
font-siz:0;
}
.item{
display: -webkit-inline-flex; //这里改了
color: #999;
line-height: 97rpx;
padding-left: 10rpx; //这里改了
font-size: 32rpx;
}

 


5.然后苹果机就不会出现以上问题了。

 

6.页面传id

A：html
otherAjax:function(res){
   var vip_id = res.currentTarget.dataset.vip;
   wx.navigateTo({url: \'../../page/others/others?vip_id=\' + vip_id});
},

B:html

 data:{
　　params:\'\'
}
onLoad: function (options) {
    var params = options;
    this.setData({
      params: params.id
    });
console.log(this.data.params)//id
}

 





 

相关文章