开发小程序中的心得

作者: 名字_都被占了 | 来源:发表于2018-07-30 20:21 被阅读0次

心得：

1：template中用到的样式，即.wxss文件中的内容，必须得在调用template的page的.wxss文件中进行导入，比如@import "../../module/wodeitem/wodeitem.wxss";，不导入的话就没有样式了；eg：

2：并且template中的view都可以绑定事件，并且必须在调用template的page的.js文件中进行导入，比如var danji=require("../../module/wodeitem/wodeitem.js")，间接的进行事件的绑定；另外需要注意的是调用template的页面中的template的绑定事件的名称必须和template内部的绑定事件的名称一致才行，不然会报找不到事件警告，eg:

3：要想实现gridview的效果，需要使用到display: -webkit-flex和flex-direction: row和flex-wrap: wrap属性，如果是display: flex和flex-direction: row和flex-wrap: wrap属性是实现不了的；

4：this.setData({})方法以及data中的数据只能出现单独的function中，不能用在以wx来引用的api中(可以和系统自带的api，如console之类的一起出现在一个function中，如下图所示)，否则会报错：

和系统自带的api同时出现在一个function中

错误如下：

1：在wx引用的api中调用data中的数据会出现shuju is not defined;at pages/index/index page danji function ReferenceError: shuju is not defined错误；

2：在wx引用的api中调用setData函数来设置data的数据时会出现Cannot read property 'setData' of null;at pages/shouye/shouye onPullDownRefresh function;at api request success callback function TypeError: Cannot read property 'setData' of null

可以通过全局变量来传递数据，如下图

效果如下

5：template中可以给view设置id，然后id的值由使用template的页面的.js文件来提供，如下图所示：

6：如果所要导入的.js文件和自身文件在同一目录下，可以通过如下方法导入

7：在wx的api中是不能直接调用setData()函数和data中的数据的，但是可以简介的调用，通过var that=this(需要注意的是var that=this只能声明为局部变量，不能声明为全局变量，不然会报错，如果多个函数需要使用that的话，就声明多个that局部变量就行)，然后就可以通过that来调用setData()和data中的数据了，都不需要全局变量来间接的传递数据了，参考文章：https://www.jianshu.com/p/dae1bac5fc75 https://github.com/Harhao/miniapps/blob/master/demo/pages/index/index.js

可以间接的调用setData()

效果展示

8：只有通过setData()函数才能将逻辑层中改变后的数据同步更新到视图层。

9：view和text显示文本的区别

<view style='text-align: center;'>
  <image style='width:50rpx;height:50rpx;' src='../../images/lansewode.png'></image>
  <text>我是文本</text>
</view>

效果如下：

<view style='text-align: center;'>
  <image style='width:50rpx;height:50rpx;' src='../../images/lansewode.png'></image>
  <view>我是文本</view>
</view>

效果如下：

此例总结如下:

1：text-align属性可以设置图片和文字的对齐方式，不只是只能设置文字；

2：view显示的文本是带有换行的，是上下都有换行，会将view显示的文本单独放在一行，text显示的文本不带有换行；

10：路径中..所代表的含义，比如src='../../images/lansewode.png'就表示的是当前文件向上一个目录，然后再向上一个目录，然后找名字为images的文件夹，然后找images文件夹下的lansewode.png

11：margin和padding的参数的说明，如下：

以margin为例，padding同理

margin为4个时，margin:上右下左;（为顺时针方向）

margin为3个时，margin:上左=右下;

margin为2个时，margin:上=下左=右;

margin为1个时，margin:上=右=下=左;

也可以通过具体的属性来设置，比如margin-top之类的。

注意：margin和padding的多个参数之间用空格隔开，如果用逗号的话是看不到效果的

12：border-radius属性的说明，只要是能看见的视图，有边框的都可以设置该属性，比如view，text之类的，都可以设置该属性，示例代码如下：

<view style='border-radius: 40rpx; width:400rpx;text-align: center;margin: 100rpx 100rpx;background-color:#bbbbbb'>
  <text style='padding:50rpx;border-radius: 40rpx;background-color:#ab1231'>你好</text>
</view>

效果如下

从这个图我们也能看出如果设置子view的padding属性超出了父view的宽和高，那么子view的边框不受父view的边框的限制，会超出父view的边框，但是如果是margin的话，就不行了，子view的边框会受到父view边框的限制

13：overflow属性的说明如下：

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

参考文章：https://www.cnblogs.com/Annayang/p/4184700.html

14：opacity属性是设置view的透明度的，取值是0~1(0表示完全透明，1表示不透明)，示例如下：

<view>
  <text style='opacity: 0.1;margin:50rpx;border-radius: 40rpx;background-color:#ab1231'>你好</text>
  <text style='opacity: 0.4;margin:50rpx;border-radius: 40rpx;background-color:#ab1231'>你好</text>
  <text style='opacity: 0.7;margin:50rpx;border-radius: 40rpx;background-color:#ab1231'>你好</text>
  <text style='opacity: 1;margin:50rpx;border-radius: 40rpx;background-color:#ab1231'>你好</text>
</view>

效果如下：

15：transition属性是用来设置视图的状态变化时的过渡动画的，如transition: 1s;表示过渡动画的时间持续1s

16：wx:for-items功能,效果和wx:for是一样的,都是用于循环数据的

参考文章：https://blog.csdn.net/u013338742/article/details/78785918

17：position属性的说明如下(注意如果声明了元素的position，而没有设置left，top之类的，那么默认它们就是0，仍然要进行位置的定位)：

17.1：static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。

17.2：relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。相对定位：元素是相对自身进行定位，参照物是自己，原来的位置会被保留。

17.3：absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义，原来的位置不会被保留。

17.4：fixed：固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

做个比较形象的比喻：
例如排队
1、比如前面已经排了3个人了，你第4个到，那么你的位置就是第4个，这个是static
2、这时因为看到旁边的队伍走的快，你就让后面的人帮助你照看一下你这个位置，你到旁边的队伍排着，如果旁边队伍又慢了，你就可以回来。这就是relative，有点贪得无厌哈！：&
3、同样，如果你看到旁边的队伍确实快，你直接放弃了本队的第4个位置，后面的直接占了这个位置，那么这就是absolute，这个才是对的嘛！不应该人走了还占位置。 :()
4、最后，我是某某亲戚，我想占哪队就占哪队，我想占哪个位置就哪个位置，谁也管不着，这个就是fixed了。
哈哈，还是fixed最霸道，不得不让着点！

代码如下：

<view>
  <text style='opacity: 0.2;background-color:#ab1231;position: static;top: 100rpx;left: 50rpx;'>static,默认的</text>
  <text style='opacity: 0.4;background-color:#ab1231; position: absolute;top: 100rpx;left: 50rpx;'>absolute</text>
  <text style='opacity: 0.7;background-color:#ab1231;position: relative;top: 100rpx;left: 50rpx;'>relative</text>
  <text style='opacity: 1;background-color:#ab1231;position: fixed;top: 100rpx;left: 50rpx'>fixed</text>
</view>

效果如下：

18：font的一些css属性

font-size(设置字体的大小)

font-weight(设置字体的粗细)

19：display:block能够将元素变为块级元素，使得元素能够单独在一行，具有换行的功能

20：float具有定位的功能，left是将元素定位在左侧，right同理，效果如下：

从代码可以看出view和text的区别，view具有换行的作用，text没有，float的定位作用，block具有换行的作用

再来两张图：

可以看出float可以将元素进行定位，被定位的元素会占据位置，剩下的空间继续放置其他元素

从代码可以看出，先将文本1放置在右侧，然后将文本2放置在左侧，然后将文本3放置在右侧(也就是文本1的左侧)，最后将文本4放置在这行剩下的空间中

从效果图可以看出当用float定位时，如果元素在一行放不下的时候，该元素会自动换行

从效果图可以看出当没有使用float定位的元素会继续在该行放置元素，但是实在是放不下的时候也会换行

21：display:table的用法，它放在父元素中，然后子元素中用display: table-row来设置子元素是否在单独一行，它能够将非块级元素变为块级元素，子元素用display: table-cell来设置子元素是否在单独一列，它也能够将非块级元素变为块级元素，示例如下：

子元素全部使用display: table-row的效果图

子元素全部使用display: table-cell的效果图

display: table-row和display: table-cell是用于紧挨着的两个子元素都是table-row或者是table-cell的，这样它们才会换行或者是换列，否则第二个子元素会和第一个子元素进行比较，如果发现不一样，那么第二个子元素会认为自身已经是在单独的一行或一列了，但实际上并不是，虽然说看似换行正确的，但事实上这并不是table-row的效果，而是table-row将非块级元素变为块级元素了，然后块级元素导致的换行

如果连续的两个子元素都是table-row或者是table-cell的话，效果就对了，同上，第二个子元素会和第一个子元素比较，发现一样，那么就需要换到不同的行或者是列

做了个小练习，如下：

模仿图

做出来的效果图，只是效果，没有用input标签，全是text，不能输入

代码图

22：两种写法，效果一样(全局变量和page变量的写法)

写法一(声明为全局变量，然后在page()中调用该变量就不需要使用this来指向该变量所在的范围)：

var donghua1 = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
})
Page({
  data: {
    logs: [],
    donghua:{}
  },
  ...
 danji9:function(){
    this.setData({
      donghua: donghua1.rotate(180).step().export()
    })
  }
})

写法二(声明为page()中的变量，然后在page()中调用该变量时需要通过this来指向该变量所在的范围为page范围,注意并没有用this.data来指向的原因是变量并没有在data:{}中声明，而是直接在函数中赋值的，所以不用)：

Page({
  data: {
    donghua:{}
  },
  onLoad: function() {
    var donghua1 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
    this.donghua1=donghua1
  },
  ...
danji9:function(){
    this.setData({
      donghua: this.donghua1.rotate(180).step().export()
    })
  }
})

23：动画的使用

<button animation="{{donghua}}" bindtap='danji9'>动画效果</button>

Page({
  data: {
    donghua:{}
  },
  onLoad: function() {
    var donghua1 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
    this.donghua1=donghua1
  },
  danji9:function(){
    this.setData({
      donghua: this.donghua1.rotate(180).step().export()
    })
  }
})

注意：Animation.step方法是必须要调用的，不然是看不到动画效果的

24：画布(Canvas)的使用

<button bindtap='danji11'>画布</button>
<canvas canvas-id="myCanvas"/>

...
danji11:function(){
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFontSize(20)
    ctx.fillText('20', 20, 20)
    ctx.setFontSize(30)
    ctx.fillText('30', 40, 40)
    ctx.setFontSize(40)
    ctx.fillText('40', 60, 60)
    ctx.setFontSize(50)
    ctx.fillText('50', 90, 90)
    ctx.draw()
  }
...

25：js中将Thu May 12 2017 08:00:00 GMT时间转化为普通时间的方式

var date = new Date('Thu May 12 2017 08:00:00 GMT+0800 (中国标准时间)');  
date_value=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();  
//输出的时间格式为：yyyy-MM-dd hh:mm:ss

26：使用page范围内的数据的时候，切记在数据名前面加上this.data，不然数据名获取到的数据就是未定义。

27：可以通过line-height属性来调节行与行之间的宽度。

28：在函数中用了var that = this之后，再调用page范围内的数据以及setData的话就得使用that了，不能再使用this了，不然会报错的。

29：如果数组中的数据是字典，然后如果要获取字典中的数据的话，写法为：res.data[i]["time"]，第一个[]中的数据是数组的元素索引，第二个[]中的数据就是字典中的字段名。

30：js中计算两个日期之间的时间差

         for (var i = 0; i < res.data.length; i++) {
            var date = new Date(res.data[i]["time"]);
            var date_value = new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
            res.data[i]["time"] = date_value
            var date1 = new Date();
            var date_value1 = new Date(date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds());
            if (parseInt(date_value1 - date_value) / 1000 < 60) {
              res.data[i]["time"] = Math.round(parseInt(date_value1 - date_value) / 1000) + "秒前"
            } else if (parseInt(date_value1 - date_value) / 60000 < 60) {
              res.data[i]["time"] = Math.round(parseInt(date_value1 - date_value) / 60000) + "分钟前"
            } else if (parseInt(date_value1 - date_value) / 3600000 < 24) {
              res.data[i]["time"] = Math.round(parseInt(date_value1 - date_value) / 3600000) + "小时前"
            } else {
              res.data[i]["time"] = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
            }
          }

参考文章：https://zhidao.baidu.com/question/1823676179796144548.html

31：js中自定义函数写完之后，如果在本文件的其他地方调用的话，记得加上this.函数名进行调用，不用再函数名后面加()，不然是找不到自定义函数的。

32：微信小程序css控制文本显示行数，超出隐藏

代码如下：

<template name="template_shouye">
  <view style='  display: flex; flex-direction:  column;' bindtap="danji">
    <view style='margin-top: 10rpx;margin-left: 20rpx; margin-right: 20rpx; display:  flex; flex-direction:  row'>
      <text style='display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;line-height: 50rpx;height: 200rpx; width: 60%;font-size: 40rpx;font-weight: 10rpx;'>{{text}}</text>
      <image style='height: 200rpx; width: 40%; border-radius: 10rpx;' src='{{imageurl}}'></image>
    </view>
    <view style='margin-top: 20rpx;margin-bottom: 10rpx;background-color:  gainsboro; width:100%;height:1rpx'></view>
  </view>
</template>

效果如下：

参考文章：

https://blog.csdn.net/qq_36614846/article/details/80711394
https://blog.csdn.net/zhuhai__yizhi/article/details/77199190

利用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

*{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}*

1、-webkit-line-clamp限制在一个块元素中文本显示的行数。它需要组合其他的WebKit属性。常见结合属性：

2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

效果如下图：

三种实现单行、多行文本溢出显示省略号…的方法

参考文章：

https://jingyan.baidu.com/article/a3a3f8113e32168da3eb8a52.html

33：微信小程序中让文本居中的方式

代码如下：

  display: flex;
  align-items: center;
  justify-content: center;

34：align-self: center;可以让自身居中

35：可以设置通过点击一个按钮来实现转发，前提必须是button,<button plain='true' open-type='share'></button>

参考文章：

https://blog.csdn.net/qq_41971087/article/details/82151813
https://blog.csdn.net/kan2281123066/article/details/77145871

36：在index.js文件中写下如下开关，可以动态控制小程序加载时的初始页面。

var that = this
wx.request({
  url: 'https://app.51babyapp.com/wx_xiaochengxu/hezi_yizhixiuxianbx.json',
  method: 'GET',
  data: {},
  header: {
    'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res)
    if (res.data.appversion === getApp().globalData.appversion) {
      that.setData({
        is: false
      })
    } else {
      that.setData({
        is: true
      })
    }
  }
})

app.js文件中：

 globalData: {
    appversion: "1.4.8",//版本号，用来版本控制
}
...

37：微信小程序之间进行跳转时，目标小程序必须是体验版才能收到数据，并且必须在app的onlaunch函数中才能收到数据，在源小程序的extraData字段中加上要携带的数据。

38：catchtap将会阻止事件的向下传递。

39：当项目分为线上版本和线下版本，并且他们都受一个文件的控制，为了互不影响，可以采用版本控制的方法进行管理。

40：注意：bindtap='fanhui '和bindtap='fanhui'是两个完全不同的函数，前面的那个函数多了一个空格，这样就会出现如下错误：要细心，wx:if='{{currentIndex!==0}}'和wx:if='{{currentIndex!==0 }}'也是因为多一个空格导致条件判定失败

Component "pages/exam_content/exam_content" does not have a method "fanhui " to handle event "tap".

开发小程序中的心得

心得：

1：template中用到的样式，即.wxss文件中的内容，必须得在调用template的page的.wxss文件中进行导入，比如@import "../../module/wodeitem/wodeitem.wxss";，不导入的话就没有样式了；eg：

3：要想实现gridview的效果，需要使用到display: -webkit-flex和flex-direction: row和flex-wrap: wrap属性，如果是display: flex和flex-direction: row和flex-wrap: wrap属性是实现不了的；

4：this.setData({})方法以及data中的数据只能出现单独的function中，不能用在以wx来引用的api中(可以和系统自带的api，如console之类的一起出现在一个function中，如下图所示)，否则会报错：

错误如下：

1：在wx引用的api中调用data中的数据会出现shuju is not defined;at pages/index/index page danji function ReferenceError: shuju is not defined错误；

2：在wx引用的api中调用setData函数来设置data的数据时会出现Cannot read property 'setData' of null;at pages/shouye/shouye onPullDownRefresh function;at api request success callback function TypeError: Cannot read property 'setData' of null

可以通过全局变量来传递数据，如下图

效果如下

5：template中可以给view设置id，然后id的值由使用template的页面的.js文件来提供，如下图所示：

6：如果所要导入的.js文件和自身文件在同一目录下，可以通过如下方法导入

8：只有通过setData()函数才能将逻辑层中改变后的数据同步更新到视图层。

9：view和text显示文本的区别

效果如下：

效果如下：

此例总结如下:

1：text-align属性可以设置图片和文字的对齐方式，不只是只能设置文字；

2：view显示的文本是带有换行的，是上下都有换行，会将view显示的文本单独放在一行，text显示的文本不带有换行；

10：路径中..所代表的含义，比如src='../../images/lansewode.png'就表示的是当前文件向上一个目录，然后再向上一个目录，然后找名字为images的文件夹，然后找images文件夹下的lansewode.png

11：margin和padding的参数的说明，如下：

以margin为例，padding同理

margin为4个时，margin:上 右 下 左;（为顺时针方向）

margin为3个时，margin:上 左=右 下;

margin为2个时，margin:上=下 左=右;

margin为1个时，margin:上=右=下=左;

也可以通过具体的属性来设置，比如margin-top之类的。

注意：margin和padding的多个参数之间用空格隔开，如果用逗号的话是看不到效果的

12：border-radius属性的说明，只要是能看见的视图，有边框的都可以设置该属性，比如view，text之类的，都可以设置该属性，示例代码如下：

效果如下

13：overflow属性的说明如下：

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

参考文章：https://www.cnblogs.com/Annayang/p/4184700.html

14：opacity属性是设置view的透明度的，取值是0~1(0表示完全透明，1表示不透明)，示例如下：

效果如下：

15：transition属性是用来设置视图的状态变化时的过渡动画的，如transition: 1s;表示过渡动画的时间持续1s

16：wx:for-items功能,效果和wx:for是一样的,都是用于循环数据的

参考文章：https://blog.csdn.net/u013338742/article/details/78785918

17：position属性的说明如下(注意如果声明了元素的position，而没有设置left，top之类的，那么默认它们就是0，仍然要进行位置的定位)：

17.1：static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。

17.2：relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。相对定位：元素是相对自身进行定位，参照物是自己，原来的位置会被保留。

17.3：absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义，原来的位置不会被保留。

17.4：fixed：固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

代码如下：

效果如下：

18：font的一些css属性

font-size(设置字体的大小)

font-weight(设置字体的粗细)

19：display:block能够将元素变为块级元素，使得元素能够单独在一行，具有换行的功能

20：float具有定位的功能，left是将元素定位在左侧，right同理，效果如下：

再来两张图：

做了个小练习，如下：

22：两种写法，效果一样(全局变量和page变量的写法)

写法一(声明为全局变量，然后在page()中调用该变量就不需要使用this来指向该变量所在的范围)：

写法二(声明为page()中的变量，然后在page()中调用该变量时需要通过this来指向该变量所在的范围为page范围,注意并没有用this.data来指向的原因是变量并没有在data:{}中声明，而是直接在函数中赋值的，所以不用)：

23：动画的使用

注意：Animation.step方法是必须要调用的，不然是看不到动画效果的

24：画布(Canvas)的使用

25：js中将Thu May 12 2017 08:00:00 GMT时间转化为普通时间的方式

26：使用page范围内的数据的时候，切记在数据名前面加上this.data，不然数据名获取到的数据就是未定义。

27：可以通过line-height属性来调节行与行之间的宽度。

28：在函数中用了var that = this之后，再调用page范围内的数据以及setData的话就得使用that了，不能再使用this了，不然会报错的。

29：如果数组中的数据是字典，然后如果要获取字典中的数据的话，写法为：res.data[i]["time"]，第一个[]中的数据是数组的元素索引，第二个[]中的数据就是字典中的字段名。

30：js中计算两个日期之间的时间差

参考文章：https://zhidao.baidu.com/question/1823676179796144548.html

31：js中自定义函数写完之后，如果在本文件的其他地方调用的话，记得加上this.函数名进行调用，不用再函数名后面加()，不然是找不到自定义函数的。

32：微信小程序css控制文本显示行数，超出隐藏

代码如下：

效果如下：

参考文章：

效果如下图：

参考文章：

33：微信小程序中让文本居中的方式

代码如下：

34：align-self: center;可以让自身居中

35：可以设置通过点击一个按钮来实现转发，前提必须是button,<button plain='true' open-type='share'></button>

参考文章：

margin为4个时，margin:上右下左;（为顺时针方向）

margin为3个时，margin:上左=右下;

margin为2个时，margin:上=下左=右;