微信小程序实用代码段（持续更新中）

刺骨的言语ヽ痛彻心扉 2021-08-13 22:15 441阅读 0赞

## 前言 ##

排名不分先后，按自己的习惯来的。  
总结经验，不喜勿喷哦~

## 一、tab切换 ##

Page({ 
    data:{ 
    	// tab切换 
        currentTab: 0,
    },
    swichNav: function (e) { 
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) { 
          return false;
        } else { 
          that.setData({ 
            currentTab: e.target.dataset.current
          })
        }
      },
    
    })

## 二、swiper切换 ##

Page({ 
    data:{ 
    	currentTab: 0,
    	aheight: ''
    },
    // 滑动切换
      bindChange: function (e) { 
        var that = this;
        that.setData({ 
          currentTab: e.detail.current
        });
      },
      //点击tab切换
      swichNav: function (e) { 
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) { 
          return false;
        } else { 
          that.setData({ 
            currentTab: e.target.dataset.current
          })
        }
      },
      // swiper 自适应高度
      onLoad: function (options) { 
        var that = this
        wx.getSystemInfo({ 
          success: function (res) { 
            that.setData({ 
              aheight: res.screenHeight
            });
          }
        })
      },
    })

## 三、图片上传 ##

.upload {  width: 20%; float: left; margin-top:33rpx ; }
    .upload image{  width: 100%; }
    .logoinfo{  width: 20%; float: left; margin-right:2% ; }
    .del{  width: 20%; float: right; }
    .del image{  width: 100%; }
    .logoinfo image{  width: 100%; }

page({ 
    data:{ 
    	img_arr: []
    },
    	// 图片上传
      upimg: function () { 
        var that = this;
        if (this.data.img_arr.length < 3) { 
          wx.chooseImage({ 
            sizeType: ['original', 'compressed'],
            success: function (res) { 
              that.setData({ 
                img_arr: that.data.img_arr.concat(res.tempFilePaths),
              })
    
            }
          })
        } else { 
          wx.showToast({ 
            title: '最多上传三张图片',
            icon: 'loading',
            duration: 3000
          });
        }
      },
      // 删除图片
      deleteImage: function (e) { 
        var that = this;
        var index = e.currentTarget.dataset.index; //获取当前长按图片下标
        console.log(that.data.img_arr)
        wx.showModal({ 
          title: '提示',
          content: '确定要删除此图片吗？',
          success: function (res) { 
            if (res.confirm) { 
              console.log('点击确定了');
              that.data.img_arr.splice(index, 1);
            } else if (res.cancel) { 
              console.log('点击取消了');
              return false;
            }
            that.setData({ 
              img_arr: that.data.img_arr
            });
          }
        })
      },
      // 上传
      upload: function () { 
        var that = this
        for (var i = 0; i < this.data.img_arr.length; i++) { 
          wx.uploadFile({ 
            url: 'https:***/submit',
            filePath: that.data.img_arr[i],
            name: 'content',
            formData: adds,
            success: function (res) { 
              console.log(res)
              if (res) { 
                wx.showToast({ 
                  title: '已提交发布！',
                  duration: 3000
                });
              }
            }
          })
        }
        this.setData({ 
          formdata: ''
        })
      },
      // 提交
      formSubmit: function (e) { 
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
      }
    })

## 四、scroll-view滚动页 ##

<scroll-view class="scroll-view_H " scroll-x="true" bindscroll="scroll">
         <view class="fxjx_b1" style="display: inline-block">
         	 <view class="listb">1</view>
         </view>
         <view class="fxjx_b1" style="display: inline-block">
         	<view class="listb">2</view>
         </view>
     </scroll-view>

.scroll-view_H{  white-space: nowrap; height: 600rpx; }
    .listb{  padding: 25rpx; white-space: normal; }

## 五、授权登录 ##

app.js

//app.js
    App({ 
       globalData: { 
         userInfo: null,
         unionid:null,
         token:''
       },
      onLaunch: function () { 
      /* 已授权之后，自动获取用户信息 */
      // 判断是否授权
      wx.getSetting({ 
        success: (res) => {  //箭头函数为了处理this的指向问题 
          if (res.authSetting["scope.userInfo"]) { 
            console.log("已授权");
            // 获取用户信息
            wx.getUserInfo({ 
              success: (res) => {  //箭头函数为了处理this的指向问题
                // this.globalData.isok=true
                this.globalData.token='ok'
                var that =this
                console.log(res.userInfo); //用户信息结果
                wx.getStorage({ 
                  key: 'unionid',
                  success(res) { 
                   that.globalData.unionid=res.data
                  }
                })
                this.globalData.userInfo = res.userInfo;
                if (this.userInfoReadyCallback) {  //当index.js获取到了globalData就不需要回调函数了，所以回调函数需要做做一个判断，如果app.js中有和这个回调函数，那么就对这个函数进行调用，并将请求到的结果传到index.js中
                  this.userInfoReadyCallback(res.userInfo);
                }
              }
            })
          }
          else{ 
            console.log("未授权");
            wx.removeStorage({ 
              key: 'unionid'
            })
          }
        }
      })
      }
    })

wxml

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="btn" data-url='../yzzs/yzzs'>
               防疫针助手
           </button>

index.js

// pages/index/index.js
    const app = getApp()
    Page({ 
      data: { 
        token:''
      },
      onGotUserInfo: function (e) { 
        var that = this
        if (this.data.token != 'ok' && app.globalData.token != 'ok') { 
          wx.getSetting({ 
            success: (res) => {  //箭头函数为了处理this的指向问题 
              if (res.authSetting["scope.userInfo"]) { 
                wx.login({ 
                  success: function (data) { 
                    console.log('获取登录 Code：' + data.code)
                    var postData = { 
                      code: data.code
                    };
                    wx.request({ 
                      url: 'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code=' + postData.code + '&nickname=' + e.detail.userInfo.nickName,
                      data: { },
                      header: { 
                        'content-type': 'application/json'
                      },
                      success: function (res) { 
                        console.log(res.data);
                        that.data.token='ok';
                        wx.setStorage({ 
                          key: "unionid",
                          data: res.data.unionid
                        })
                        wx.navigateTo({ 
                          url: e.target.dataset.url
                        })
                      },
                      fail: function () { 
                        console.log('1');
                      }
                    })
                  },
                  fail: function () { 
                    console.log('登录获取Code失败！');
                  }
                })
              }
            }
          })
        } else{ 
          wx.navigateTo({ 
            url: e.target.dataset.url
          })
        }
      }
    })

## 六、发送请求 ##

wx.request({ 
                url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=babylist', //仅为示例，并非真实的接口地址
                method: 'post',
                data: { 
                  unionid: uni
                },
                header: { 
                  'content-type': 'application/x-www-form-urlencoded' // 默认值
                },
                success(res) { 
                  // console.log(uni)
                  console.log(res.data)
                  that.setData({ 
                    list: res.data.bblist
                  })
                }
              })

## 七、标题栏及底部栏 ##

全局标题栏

"window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#3EC8C8",
        "navigationBarTitleText": "乳孕呵护",
        "navigationBarTextStyle": "white"
      }

局部标题栏

{ 
      "usingComponents": { },
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "附近医院"
    }

全局底部栏

"tabBar": { 
        "color": "#e4e4e4",
        "selectedColor": "#333",
        "list": [
          { 
            "pagePath": "pages/index/index",
            "text": "发现",
            "iconPath": "./images/find.png",
            "selectedIconPath": "./images/finded.png"
          },
          { 
            "pagePath": "pages/his/his",
            "text": "医院",
            "iconPath": "./images/his.png",
            "selectedIconPath": "./images/hised.png"
          },
          { 
            "pagePath": "pages/stu/stu",
            "text": "经验",
            "iconPath": "./images/stu.png",
            "selectedIconPath": "./images/stued.png"
          },
          { 
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "./images/my.png",
            "selectedIconPath": "./images/myed.png"
          }
        ]
      }

## 八、navigator ##

1、wxml

<navigator url="/pages/hishome/hishome" open-type="navigate" hover-class="none">  
    底部栏没有的路由
    </navigator>
    <navigator open-type="switchTab" url="/pages/his/his" hover-class="none">
    底部栏有的路由
    </navigator>

2、js

go: function (e) { 
        wx.navigateTo({ 
          url: '../eatxq/eatxq?id=' + e.currentTarget.dataset.id + "&name=" + e.currentTarget.dataset.name
        })
      }

## 九、加载条 ##

加载完成true

wx.request({ 
                url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=caneatsearch', 
                method: 'post',
                header: { 
                  'content-type': 'application/x-www-form-urlencoded' // 默认值
                },
                data: { 
                  search: options.search
                },
                success(res) { 
                  that.setData({ 
                    list: res.data.fllist,
                    onff: true
                  })
                }
              })

## 十、富文本处理 ##

利用正则修改收到的数据

wx.request({ 
          url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=cjdetail', 
          method: 'post',
          data: { 
            id: options.id
          },
          header: { 
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          success(res) { 
            that.setData({ 
              msg: res.data.cjmag.cjxq.replace(/\<p>/g, "<p style='line-height: 24px; font-size:15px;text-align: justify;margin:15px 0;'>")
            })
          }
        })

## 十一、filter过滤数据 ##

1、在根目录下的`utils`文件夹里创建一个名为`filter.wxs`文件  
2、写入自己要定义的条件

var xb=function (v) { 
        var xingb=''
        if(v==1){ 
           xingb="男宝宝"
        }
        else{ 
            xingb="女宝宝"
        }
        return xingb
    }
    module.exports = { 
        xb:xb
    }

3、在页面中引入使用

<wxs src="../../utils/filter.wxs" module="filter" />
    <view><text>{
       {filter.xb(isxb)}}</text></view>

## 十二、检测版本更新 ##

app.js

onLaunch: function () { 
    	if (wx.canIUse('getUpdateManager')) { 
          const updateManager = wx.getUpdateManager()
          updateManager.onCheckForUpdate(function (res) { 
            // 请求完新版本信息的回调
            if (res.hasUpdate) { 
              updateManager.onUpdateReady(function () { 
                wx.showModal({ 
                  title: '更新提示',
                  content: '新版本已经准备好，是否重启应用？',
                  success: function (res) { 
                    // res: {errMsg: “showModal: ok”, cancel: false, confirm: true}
                    if (res.confirm) { 
                      // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                      updateManager.applyUpdate()
                    }
                  }
                })
              })
              updateManager.onUpdateFailed(function () { 
                // 新的版本下载失败
                wx.showModal({ 
                  title: '已经有新版本了哟~',
                  content: '新版本已经上线啦，请您删除当前小程序，重新搜索打开哟'
                })
              })
            }
          })
        }
    }

## 十三、点击tab跳转对应的的项目页面 ##

我们经常会遇到这种需求：

点击对应的的tab，这里比如说是A页。  
![在这里插入图片描述][20191104111334377.png]  
跳转到对应项目的页面，这里比如说是B页。  
![在这里插入图片描述][20191104111408794.png]  
A页：

goitem:function (e) { 
        wx.navigateTo({ 
          url: '/pages/item/item?url=' + e.target.dataset.url
        })
      },

B页：

onLoad: function (options) { 
        var that = this;
        console.log(options.url)
        if (options.url === 'cj') { 
          that.setData({ 
            currentTab: '0',
            btn: '产检',
            set: 'cj'
          });
        } else if (options.url === 'jd') { 
          that.setData({ 
            currentTab: '1',
            btn: '建档',
            set: 'jd'
          });
        } else { 
          that.setData({ 
            currentTab: '2',
            btn: '分娩',
            set: 'fm'
          });
        }
      }

## 未完待续…… ##

[20191104111334377.png]: /images/20210813/1b5a5048c1324c78bc07ac06c8723e73.png
[20191104111408794.png]: /images/20210813/9a3883db2f5e48c5abc473ad8cb1215b.png