微信小程序

常见用法 环境配置 微信小程序
前端开发
发布日期:   2020-04-06
文章字数:   2.1k
阅读时长:   8 分
阅读次数:  

0 官方文档

1 界面渲染

1.1 自定义placeholder颜色与样式

PS：

  1. 字体颜色只能通过placeholder-style设置；
  2. 字体大小只能通过placeholder-class设置

1.2 text组件不设置宽度，文本长度大于默认宽度时会自动换行

1.3 margin与padding的区别

  • margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
  • padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

1.4 微信小程序width:100%设置margin后宽度超过屏幕

这个时候宽度不能设置100%，把宽度改为width:auto即可解决超过屏幕的问题。

1.5 微信小程序各种提示框

  1. 弹出提示框，可以选择确定或者取消。
wx.showModal({
     title: '提示',
     content: '这是一个模态弹窗',
     success: function (res) {
       if (res.confirm) {//这里是点击了确定以后
         console.log('用户点击确定')
       } else {//这里是点击了取消以后
         console.log('用户点击取消')
       }
     }
})
  1. 不带确定和取消的，直接提示成功
wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000//持续的时间
  })
  1. 提示等待中…
wx.showToast({
     title: '等待...',
     icon: 'loading',
     duration: 2000  //持续的时间
})
  1. 提示文字，没有任何图标效果，但是文字可以写的很多
wx.showToast({
     title: '这里面可以写很多的文字，比其他的弹窗都要多！',
     icon: 'none',
     duration: 2000//持续的时间
})
  1. 弹窗提示选择，例如选择ABCD那种
wx.showActionSheet({
     itemList: ['A', 'B', 'C'],
     success: function (res) {
       if (!res.cancel) {
         console.log(res.tapIndex)//这里是点击了那个按钮的下标
       }
     }
})
  1. 多用于页面提示加载中
<loading hidden="{{hidden}}">
       加载中...
</loading>
// hidden有两个值：false和true

原文链接：https://jingyan.baidu.com/article/456c463b38ca900a5831449a.html

1.6 全局变量和全局方法的使用

在app.js中可以定义全局变量和方法
在其他js文件中，可以引入 const app = getApp（）
app上自带公共变量和方法 app.globalData 或 app.myMethod

  • app.js中可以定义全局变量
globalData: {
    imgurl:'/images/common/'
  }，
 myMethod ( ) {
 }
  • 页面中使用全局变量，页面js文件中
const app = getApp()  // 引入app
data: {   // data中使用全局变量
    imgurl: app.globalData.imgurl, //全局img路径
  },
  • 更新全局变量
app.globalData.imgurl=res.data.result;

原文链接：https://blog.csdn.net/weixin_43848576/article/details/98472926

1.7 数据类型转换，parseInt(‘1’)

  • 字符串转float，int
parseFloat("字符串内容"); //将字符串值转成浮点数
parseInt("字符串内容"); //将字符串值转成整数
  • 强制类型转换
String(value);   //把给定的值转换成字符串
Boolean(value);   //把给定的值转换成Boolean型； 
Number(value);   //把给定的值转换成数字（可以是整数或浮点数）；
  • 保留几位小数点
NumberObject.toFixed(位数);
  • 获取几位数：四舍五入
Number(135).toPrecision(1);  //returns   1e+2
Number(135.77).toPrecision();  //returns   135.7

原文链接：https://blog.csdn.net/shanshan_1117/article/details/89371296

1.8 模块化，module.exports

1.9 获取当前屏幕可见区域的宽高

wx.getSystemInfo({
      success: function(res) {
        console.log(res.windowWidth);
        console.log(res.windowHeight);
      },
})

1.10 小程序寻址范围

1.11 修改data中数组或对象里面的某一项值

  • 修改对象中的某一项值
// 先定义
data:{
    list:{
        data1:{},
        passengers:[
            name:''
        ]
    }
// 修改
var that=this,
num="list.data1";
that.setData({
    [num]:that.data.list.data1.push(XXX)
})
  • 修改数组的某一项
// 动态绑定input的值
inputVal: function (e) {
    var name = e.currentTarget.dataset.name;
    var index = e.currentTarget.dataset.index;
    var value = 'passengers['+index+'].'+name+'';
    this.setData({
        [value]: e.detail.value
    })
},

原文链接：https://blog.csdn.net/lw_1220/article/details/97928464

1.12 特殊效果——左滑、气泡动画等

1.13 wx:for使用

1.13.1 wk:key作用

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并希望列表中的项目保持自己的特征和状态（如<input/> 中的输入内容<switch/> 的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. wx:key=”property” 其中property是代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。类似于字典的key值
  2. wx:key=”*this”， 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

不添加wx:key情况：

<block wx:for-items="{{userInfoList}}" >

会出现warning： Now you can provide attr “wx:key” for a “wx:for” to improve performance.，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

推荐array 的 每一个item都添加一个唯一识别的property来管理，这样就可以去掉warning，如果使用保留关键字，好像会出现显示的item都是最后一个的。

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId">

原文链接：https://www.cnblogs.com/psxiao/p/12299751.html

1.14 一行2个图片列表

1.15 小程序form表单提交

  1. form表单中超过一个input标签设置了auto-focus或focus，将无法调用提交方法
  2. form表单中的提交按键必须为button，不能为text或其他

1.16 小程序Cannot read property ‘elem’ of undefined

基础库2.10.1的问题，换成别的基础库就可以了

原文链接：https://blog.csdn.net/Kf_loseHair/article/details/104590506/

1.17 Unexpected token < in JSON at position 0 的错误解析

1.18 小程序设置延时

setTimeout(function () {
     //要延时执行的代码
}, 1000) //延迟时间 这里是1秒

1.19 小程序如何动态控制view组件高度

1.20 rpx和px的换算

1.21 微信小程序动态触发点击事件

1.22 微信小程序设置文字复制功能

text设置属性 selectable=”true”

1.23 Button组件的宽高设置

在css(wxss)里面直接设置button的width,height是无效的！！！必须在html(wxml)里面的style进行设置！

2 后端连接

2.1 连接M有SQL数据库

使用PHP接口时，要把mysql_connect等用法改成mysqli_connect,不然会报错

2.2 检查网络状态

2.3 JSON取值方式

2.4 complete帮助debug

不论success或fail都可以打印返回结果

2.5 网络请求一直在pending，可能是访问接口网址不完整

  • 可以在微信开发者工具栏查看

3 开发工具技巧

3.1 调试器部分工具栏功能介绍

  1. Console：打印台
  2. Source：项目文件信息
  3. Network：查看网络请求状态
  4. Storage：查看全局存储信息
  5. AppData：查看全局变量
文章作者: fdChen
文章链接: https://blog.fdchen.host/2020/qian-duan-kai-fa-wei-xin-xiao-cheng-xu/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 fdChen !
常见用法 环境配置 微信小程序
赏
评论
 上一篇
服务器_第一次登录阿里云Windows服务器ECS详解及利用MSTSC进行连接 服务器_第一次登录阿里云Windows服务器ECS详解及利用MSTSC进行连接
1 配置规则 在实例详情里面进入“本实例安全组”界面， 进入对应实例界面，选择“快速创建规则” 选择常用的端口，如：SSH, HTTP, HTTPS, MYSQL等，授权对象自行选择：将端口授权给单个IP地址，填写：123.123.123.
2020-10-04 服务器配置
MSTSC Windows服务器 阿里云服务器ECS
下一篇 
从入门到入坟——我的第一篇博客 从入门到入坟——我的第一篇博客
开启我的博客之旅
2020-03-07 随笔
感想
  目录