微信小程序笔记1

问:代码如下:

wx.openLocation({

          latitude : '30',

          longitude : '120',

          scale: 18

});

发现导航功能失效了,怎么办?
答:上面的30、120是String类型,改成Number类型就没问题了


问:storage的应用场景有哪些?

答:参考微信小程序文档里的‘4.6.3 利用本地缓存提前渲染界面’这节内容,主要思想:‘我们在拉取商品列表后把列表存在本地缓存里,在onLoad发起请求前,先检查是否有缓存过列表,如果有的话直接渲染界面,然后等到wx.request的success回调之后再覆盖本地缓存重新渲染新的列表’,但是‘这种做法可以让用户体验你的小程序时感觉加载非常快,但是你还要留意这个做法的缺点,如果小程序对渲染的数据实时性要求非常高的话,用户看到一个旧数据的界面会非常困惑。因此一般在对数据实时性/一致性要求不高的页面采用这个方法来做提前渲染,用以优化小程序体验。’



问:我的小程序的主页是index,为什么却是先打印logs组件的东西?

微信小程序笔记1_第1张图片

答:组件是全部加载,再选使用哪个,


问:app.js里我们会封装一个方法来请求openid,请求后端接口是异步的,但是index.js是直接需要openid的,然而不能直接拿到openid,怎么办?

答:借助于promise,代码如下:

App({

    global_data: {

        openid: '',

        ajax_url: '',

    },

    onLaunch: function () {

        this.get_openid();

    },

    get_openid() {

        let that = this;

        return new Promise((resolve, reject) => {

            let openid = wx.getStorageSync('openid');

            if (!openid) {

                wx.login({

                    success: function (res) {

                        console.log(res);

                        if (res.code) {

                            let js_code = res.code;

                            let url = that.global_data.ajax_url + 'platform/GetOpenid';

                            let data = {

                                js_code

                            };

                            //发起网络请求

                            wx.request({

                                url,

                                method: 'POST',

                                data,

                                success(res) {

                                    let openid = res.data.openid;

                                    that.global_data.openid = openid;

                                    wx.setStorageSync('openid', openid);

                                    resolve(openid);

                                },

                                fail(res) {

                                    console.log('fail', res)

                                },

                                complete(res) {

                                    console.log('complete', res)

                                }

                            })

                        } else {

                            console.log('登录失败!' + res.errMsg)

                        }

                    }

                });

            }

            else {

                that.global_data.openid = openid;

            }

        });

    },

});


以下情况可以尝试重启微信小程序开发工具或者重新导入微信小程序项目来解决问题:
换了appid和secret
报错‘pages/index/index/index.js不存在,缺少文件’,如果发现这个路径下其实是有文件的,就重启小程序开发工具


问:页面1跳到页面2(页面2是一个用户列表),页面2可以跳到页面3(添加用户的表单),页面3中点击提交按钮以后,使用wx.redirectTo()跳回页面2,点击页面2的返回按钮,发现页面路径没有变,只是跳到了添加用户之前的页面2,怎么解决这个问题?
答:页面3添加用户之后,不要用wx.redirectTo()跳回页面2,用wx.navigateBack()跳回页面2,页面2的渲染列表接口,用onShow不用onLoad,这个时候就可以解决自己的问题了


问:怎么解决这个报错?Setting data field "zjhm" to undefined is invalid.
答:上面这个问题说的是执行了类似
this.setData({zjhm : undefined});
的代码,把zjhm的值改成有值的数据,就行了


如果微信小程序项目里,所有功能都能在里实现,就不要用微信小程序本身的语言了,如果项目里有蓝牙、分享,就只能用微信小程序本身的语言了,因为里不能调起蓝牙、分享的接口

问:为什么很少有微信小程序里是全部用1个来实现的?
答:像分享、蓝牙这些东西都没办法在网页里调用了

问:this.setData的原理是什么?
答:其实setData的参数就是个对象,在set的时候系统是把这个对象JSON.STRINGIFY之后传给渲染进程,在渲染进程里又json.parse解析出来

封装一个弹出框、设置缓存、清除缓存的函数,可以兼容微信小程序和支付宝小程序,在app.js里写:
showModal(con){
if (typeof my == 'undefined') {
    wx.showModal({  //微信小程序的api放在这里
    content:con,
    showCancel : false,
    confirmColor : '#1f75ec'
});
}
else{
my.alert({
content: con,
})
}
},
set_storage(key, data){
if (typeof my == 'undefined') {
wx.setStorage(key, data);
}
else
my.setStorageSync({key,data});
}
}

如果页面里同时写2个let sel_rqtype,不但会报错,而且会导致getApp()没有返回值

问:get_account(e){
  this.setData({
  account : e.detail.value
  });
  },
  get_password(e){
  this.setData({
  password : e.detail.value
  });
  },
上面的get_account和get_password这2个函数有相同的代码,怎么封装成同一个函数?
答:get_account(e){
let name = e.currentTarget.dataset.name;
  this.setData({
  [name] : e.detail.value
  });
  },


问:页面的几种跳转方式,分别什么时候用?
答:如果页面a跳到页面b以后,页面b的左上角不需要提供返回按钮来返回页面a的话,就可以用redirectTo,比如注册以后需要跳到登录页面的话,就适合用redirectTo;如果是从登录页面跳到首页(tabBar页面),就用reLaunch;如果页面b的左上角需要提供返回的那个箭头,就用navigateTo

个人开发者的‘开发’模块这里没有‘业务域名’的配置,也就意味着,个人开发者账号不能用

微信小程序笔记1_第2张图片

提交请求的时候,后端报错了,检查了下自己提交的数据:'rqtype'的值是1,但是外面没有嵌套双引号,我估计是这里出问题了,然后给'rqtype'设置为字符串以后,再用JSON.stringify,再提交时,就没有问题了,以后提交给后端的数据,必须每个属性值是字符串,不能是数字

问:虽然设置了不校验web-view,但是我发现还是会在我的苹果手机里报错,怎么办?
答:打开调试

我之前在微信小程序里,为了拿到一个年月选择器,我去找了UI组件库,其实这个不需要用组件库,这样写就能实现需求了:
wxml部分:

多列选择器:

当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}

js部分:
multiArray: [[2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],//二维数组,长度是多少是几列
multiIndex: [0, 0],
bindMultiPickerChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value);
this.setData({ multiIndex: e.detail.value })
},

问:小程序不支持

,但是有时候又需要
标签,怎么办?
答:使用display: table;代替
,使用display: table-row;代替,display: table-cell;代替

问:支付宝小程序和微信小程序的请求,url一致,都是post请求,提交的data一致,但是微信小程序请求失败,获取不到数据,让后端打断点,发现后端没接收到自己请求的数据,怎么办?
答:我对比了支付宝小程序的‘Request Headers’,发现两者有一些区别,给微信小程序的请求头设置‘header : {
 'content-type':'application/x-www-form-urlencoded'
}’,就没问题了

问:有时候e.target.dataset.orgname不能获取到被点击元素的自定义属性,怎么办?(这个问题是微信小程序和支付宝小程序通用的)
答:用e.currentTarget.dataset.orgname;


微信小程序笔记1_第3张图片

问:我发现,微信小程序如果有‘开发版’的历史记录的话,
在搜索同名小程序,结果会在上线的小程序里出现调试面板,怎么解决?
答:把‘开发版’的小程序删除历史记录,再去搜索小程序,就可以解决问题了,但是这种办法用户体验不好,更好的办法是在首页加入这句话(关闭调试模式):
wx.setEnableDebug({
 enableDebug: false
 });

关于picker里如何使用对象数组的问题,下面写1个demo:
wxml:

    {{objectArray[index].hosname}}

js:
objectArray : [{hosname":"浙江大学医学院附属第二医院"}]

onHide这个函数,在关闭调试-重启小程序以后,并不会执行,当页面a跳到页面b时,页面a的onHide才会执行

问:页面a使用wx.showLoading({
 title: '加载中...',
});
然后跳到页面b,页面b有没有loading效果?
答:没有,所以当点击提交按钮,显示loading,成功以后如果需要跳转页面的话,就不需要隐藏loadng了

微信小程序获取到数据以后不要马上隐藏loading,要在that.setData的回调函数里隐藏loading,因为从获取到了数据到渲染完数据有时间的

问:button按钮在点击状态时修改背景颜色,怎么实现?
答:
方案1,这是最原始的方法:

wxss:
.bg1{
background: #f00;
}
.bg1:active{
 background: #0f0;
}
方案2:
wxml不变,wxss改成:
.bg1{
background: #f00;
}
.bg2{
 background: #ff0;
}
也就是说,button的hover-class的值,就是用户点击按钮时的class值

问:wx.navigateTo 页面之间传值  是解析成字符串!连 null 都是字符串 ,怎么办?
答:JSON.pase(),参数挂载到全局app对象上   存: getApp().xx   取: getApp().xx

问:如何从一个微信小程序跳到另一个微信小程序?
答:
wx.navigateToMiniProgram({

    appId: 'wxe395e2d07e2a5fff',

    path: 'pages/index/index',

    extraData: {},

    envVersion: 'develop',

    success(res) {

        console.log('res', res);

    }

});
但是如果写在onLoad里,是不行的,会报错:
把wx.navigateToMiniProgram放在一个事件里就可以了,其中,‘invoke’是‘调用’的意思


问:map的层级高于view,哪怕view设置了绝对定位,层级理论上说应该是大于map,怎么解决这个问题呢?

答:使用可以实现需求


通过wx.getSystemInfoSync().windowHeight获取到的窗口高度单位是px


通过wx.createSelectorQuery()

            .select('.top').boundingClientRect()

            .selectViewport().boundingClientRect()

            .selectViewport().scrollOffset().exec((ret)

获取到的height的单位是px

如果.top是动态生成的,直接在onReady通过上面这种方式获取到的.top的高度,和页面实际高度不一致,是因为获取.top高度的时间不对,.top还没渲染完,就获取.top高度了


问:有时候我们有这个需求:就是页面b想用页面a的样式,怎么办?

答:在页面b.wxss里写:@import '../health_file/health_file.wxss';

这样可以在页面b里使用页面a的样式,我今天试了这个方法后,发现引入页面a的样式以后,页面b的样式就乱了,所以写代码时,要注意规范性、灵活性、可复用性


问:今天写小程序页面时,发现我给1个元素设置的样式竟然失效了,怎么办?

答:我把这个元素的class改了以后,再在css里改了,就把问题解决了(这个问题可能是因为小程序不支持部分class值)


所有文件放在index文件夹下面,这样可以减少bug、减少代码,可以在跳转页面的时候,跳转的层级永远是一样的


问:

.face_recog_lead_wrap{

    position: fixed;

    z-index: 1;

    width: 100%;

    height: 100px;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    background: #fff;

    top:0;

    right:0;

    bottom:0;

    left:0;

}

.face_recog_lead_wrap这个元素,高度超过了屏幕,但是没有滚动条,不会滚动,怎么办?

答:我把height:100%;改成了height:100px;发现就会滚动了,然后就js获取屏幕高度,动态设置.face_recog_lead_wrap的高度,这样就解决了我的问题了


问:如果使用

wx.navigateTo({

url: '../sel_patient/sel_patient?to=health_file'

});

既不报错,也没有跳转页面,可能的原因有哪些?

答:可能sel_patient是tabBar页面


问:onLoad和onShow什么区别?

答:从页面a跳到页面b,再跳回页面a时,会执行onShow不会执行onLoad


问:在onShow里怎么获取onLoad的query参数呢?

答:一开始我这样写:

onLoad(query){that.setData({xx:query.xx})}

onShow(){that.data.xx}

发现上面这样写,有时候onShow里获取不到that.data.xx,怎么办?

我目前的解决方案如下:

onLoad(query){

      var that = this;

      var to = query.to;

      that.setData({

          to

      });

  },

  onShow(query){

    var that = this;

    let to = that.data.to;

    if(!to){

        let get_to = setInterval(function () {

            if(to){

                clearInterval(get_to);

  操作

            }

        }, 10);

    }

    else{

操作

    }


微信小程序 button按钮有默认灰色边框,给button设置border:none;这个边框仍然存在,怎么解决?

设置:button::after{display: none;}


今天遇到1个情况,就是的高度是42,父元素的高度是48,而父元素其实是没有设置padding、margin的,怎么办?

最后自己的解决方案是:给标签加上float:left;就让父元素高度等于高度了


小程序在设置某条数据的时候,可以给数组下面的某一条设置,不一定要直接给数组设置数据,代码示例如下:

changeItemInArray: function () {

    this.setData({

      'array[0].text': 'changed data'

    })

  },



微信小程序笔记1_第4张图片

我以前看到上面的弹出框的需求时,会这样做:

弹出框全部内容用1个来做,然后控制这个的显示与隐藏,现在发现有1种更好的做法,代码如下:

wxml如下:

  

   

js如下:

Page({

  data: {

    hiddenmodalput: true,

    //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框

  },

  //点击按钮痰喘指定的hiddenmodalput弹出框

  modalinput: function () {

    this.setData({

      hiddenmodalput: !this.data.hiddenmodalput

    })

  },

  //取消按钮

  cancel: function () {

    this.setData({

      hiddenmodalput: true

    });

  },

  //确认

  confirm: function () {

    this.setData({

      hiddenmodalput: true

    })

  }

})


问:如何在微信小程序里避免回调函数的嵌套?

答:可以使用promise来避免回调函数的嵌套,列举一个简单demo如下:

Page({});

const promisify = require('../../../utils/promisify');

const getSystemInfo = promisify(wx.getSystemInfo);

getSystemInfo().then(f1)

              .then(f2);

function f1() {

    console.log('f1');

}

function f2() {

    console.log('f2');

}

其中,promisify.js代码如下:

module.exports = (api) => {

    return (options, ...params) => {

        return new Promise((resolve, reject) => {

            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);

        });

    }

};

你可能感兴趣的:(微信小程序笔记1)