微信小程序基本知识汇总

            1、非tab路由跳转
            wx.navigateTo({
                url: '/pages/work_order_create/index'
            })
            2、动态设置头部标题
            wx.setNavigationBarTitle({
                title: "创建工单"
            })
            3、上传图片（选择从相册上传或者拍照上传）
             wx.chooseImage({
                success: function(res) {
                  var tempFilePaths = res.tempFilePaths
                  wx.uploadFile({
                    url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
                    filePath: tempFilePaths[0],
                    name: 'file',
                    formData:{
                      'user': 'test'
                    },
                    success: function(res){
                      var data = res.data
                      //do something
                    }
                  })
                }
              })
            4、page里面调用methods方法
            onload() {
                console.log(this.methods.toChineseBig(2))
            },
            4、Component里面调用methods方法
           attached() {
                console.log(this.__proto__.toChineseBig(12))
            },
            5、调用外部js文件函数
            （1）引入
            const util = require('../../utils/util')
            （2）调用
            attached() {
                console.log(util.toChineseBig(120), '00000')
            }
            6、methods修改data数据
             selectType() {
                this.setData({
                    showType:true
                })
             },
            7、富文本框的使用
            <textarea auto-height class="textareaMs" maxlength="200" 
                placeholder="200字以内" value="{{problemObj.remark}}"></textarea>
            8、添加多个对象--不能直接对data数据操作，需要用中间对象过渡
            continueAdd() {
                let arr = this.data.problemArr
                arr.push({})
                this.setData({
                    problemArr: arr
                })
            },
            9、点击事件传参
            用data-*自定义属性传参，*是参数名称
            <text class="delBtn" bindtap="delProblem" data-index="{{index}}">删除</text>
            10、修改某个对象的属性值
            if (e.detail.value == '1') { //商家处理
                this.setData({
                    [`problemArr[${i}].type`]: 1
                })
            } else { //指定
                this.setData({
                    [`problemArr[${i}].type`]: 2
                })
            }
            11、解决自定义tab图标闪动问题
            onShow() {
                if (typeof this.getTabBar === 'function' &&
                    this.getTabBar()) {
                    this.getTabBar().setData({
                        selected: 3
                    })
                }
            },
            12、接收路由传参
            传参：
            wx.navigateTo({
                url: '/pages/sign_in/sign_in?title=' + '巡检任务一'
            })
            接收：
            onLoad(options) {
                this.setData({
                    title: options.title
                })
            },
            13、使用toast提示
            wx.showToast({
                title: '超期不可签到',
                icon: 'error', //success、loading、none不显示图标
                duration: 1000,
                mask: true, //是否显示透明图层防止触膜穿透
            })
            14、for循环
            <image wx:for="{{imgPics}}" src="{{item.pic}}" alt="" />
            15、小程序中编写表格
               <view class="table">
                    <text class="title">街区自治组织</text>
                    <!-- 表头(即第一行) -->
                    <view class="tr t_header">
                        <view class="td">自治委员会</view>
                        <view class="td">商户包干人员</view>
                        <view class="td">市场监督管理人员</view>
                    </view>
                    <!-- 表格第二行 -->
                    <view class="tr noTopborder">
                        <view class="td">理事长：张三
                            副理事长：李四
                            秘书长：周三
                            理事：赵倩
                            理事：赵倩
                            理事：赵倩
                            理事：赵倩
                            理事：赵倩
                            理事：赵倩
                        </view>
                        <view class="td">1</view>
                        <view class="td">代表1代表2代表3</view>
                    </view>
                </view>
               /* 表格样式 */
                .table {
                    display: flex;
                    flex-direction: column;
                    /* 排列形式: 向下 */
                    margin-top: 20rpx;

                }
                css
                .table .title {
                    padding: 0 0 20rpx 0;
                    font-weight: bold;
                }
                .tr {
                    display: flex;
                    flex-direction: row;
                }
                .th,
                .td {
                    /* 公有的属性 */
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    /* 自动换行 */
                    width: 30%;
                    /* 4个25%相加刚好100% */
                    text-align: center;
                    /* 文本居中 */
                    justify-content: center;
                    /* 主轴居中 */
                    align-items: center;
                    /* 交叉轴居中 */
                    border: 1px solid #dadada;
                    /* 单元格线框 */
                    padding: 10rpx 4rpx;
                }
                .th,
                .td:nth-last-child(1) {
                    width: 40%;
                }
                .td:not(:last-child) {
                    border-right: unset;
                }
                .t_header {
                    background: #F4F4F4;
                }
                .table .tr:not(:last-child) {
                    border-bottom: unset;
                }
                .th {
                    background-color: #FAFAFA;
                    /* 背景色 */
                }
                16、预览图片
                previewProblemImg(e) {
                    //所有图片
                    let imgs = this.data.imgPics;
                    let https = []
                    imgs.map(aa => {
                        https.push(aa.pic)
                    })
                    wx.previewImage({
                        //当前显示图片
                        current: e.currentTarget.dataset.path,
                        //所有图片的https链接
                        urls: https
                    })
                },
                17、保存图片功能
                wx.downloadFile({
                    url: 'https://i0.hdslb.com/bfs/archive/f2bcc13613635be63786cad5480d95ca5a0fa4f6.png@880w_388h_1c_95q', //图片的地址
                    type: 'audio',
                    success: function (res) {
                        const tempFilePath = res.tempFilePath //如果请求成功，则通过res中的tempFilePath 得到需要下载的图片地址
                        console.log(tempFilePath); //方便查看，这里打印路径，并且提示请求成功
                        console.log("请求到了");
                        wx.saveImageToPhotosAlbum({
                            filePath: tempFilePath, //设置下载图片的地址
                                success: function () {
                                console.log("保存成功"); //保存成功后进行的提示
                            }
                        })
                    }
                })
                18、input框双向绑定数据（通用方法）
                传入parmas属性
                <input class="viewValue inputClass" bindinput="bindInput" data-param="address" type="text" value="{{address}}" />
                拿到绑定的属性值，给该属性赋值
                bindInput(e) {
                    console.log(e)
                    this.setData({
                        [`${e.currentTarget.dataset.param}`]: e.detail.value
                    })
                    console.log(this.data.address)
                },
                18、textarea框双向绑定数据（通用方法）
                【data定义】
                problemObj: {
                    remark1: 'sss1',
                    remark2: 'sss2',
                    remark3: 'sss3',
                }
                【传入parmas属性】
                <textarea auto-height class="textareaMs" data-param="remark3" maxlength="200" placeholder="200字以内" 
                    value="{{problemObj.remark3}}"></textarea>
                【拿到绑定的属性值，给该属性赋值】
                bindTextAreaBlur(e) {
                    console.log(e)
                    let key = e.currentTarget.dataset.param + ""
                    this.setData({
                        [`problemObj.${key}`]: e.detail.value
                    })
                    console.log(this.data.problemObj, '---')
                },
                19、监听用户下拉刷新事件
                现在指定页面或app.json中配置开启下拉刷新参数
                "enablePullDownRefresh":true,//开启下拉刷新
                "backgroundTextStyle": "dark",//设置下拉加载三个点颜色
                "backgroundColor": "#F4F4F4"//设置下拉加载背景颜色
                在下拉刷新的生命周期函数中写逻辑。加载完数据后需要手动关闭事件
                onPullDownRefresh: function (e) {
                    console.log('111')
                    // this.setData({
                    //     isShowViewMore:false
                    // })
                    // wx.stopPullDownRefresh()
                },
                20、路由传参
                wx.navigateTo({
                    url: url+'?merchantId='+e.currentTarget.merchantId,
                })
                21、接收路由参数
                onLoad(options) {
                    this.setData({
                        currentMerchantId: options.merchantId,
                        currentWorkOrderId: options.id
                    })
                },

                22、显示多行消息提示
                wx.showToast({
                    title: res.msg,
                    icon:'none'//设置为none可以显示多行信息
                })
                23、返回上一步
                 wx.navigateBack({ delta: 1 })
                 23、本地存储
                同步存储：wx.setStorageSync('realName',res.data.realName)
                取值：wx.getStorageSync('realName')