博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序笔记
阅读量:6951 次
发布时间:2019-06-27

本文共 7526 字,大约阅读时间需要 25 分钟。

1、通常情况下小程序的背景色backgroundColor要和页面的颜色设置成同一颜色。2、justify-content 设置的是主轴上的对齐方式,而align-items 设置的是交叉轴上的对齐方式。通过观察flex-direction的值来判断 竖直方向还是水平方向哪一条是主轴。若flex-direction: column;那么竖直方向上为主轴,若flex-direction:row,那么水平方向上为主轴。3、当一行内所有元素的宽度相加超过屏幕的宽度时,flex布局会将每一个元素进行压缩,以保证所有的元素都能显示在同一行内。为了让元素换行,可以使用flex-wrap: wrap4、小程序中的像素单位rpx可以根据设备的屏幕进行自适应。若一个字体设置成22px,那么不管设备是IP5还是IP6都会显示同样大的字,但是使用了rpx作为单位之后,在IP5上显示的字会小于IP6上的字。5、在全局样式表(app.wxss)中定义的样式,只有font和color才会被组件继承,其他的样式都不会被组件继承(这样确保了组件的封闭性)。但是几乎所有的样式都可以被page给继承。6、在设计组件时,尽量不要让组件产生一些无意义的空白。7、使用bind:tap="onClick"来为页面元素绑定响应时间,此处为单击事件。    catch:tap可以阻止冒泡事件。8、组件复用,代码分离。9、一般不会将请求后台的代码写在组件中。如果组件中需要请求后台了应该是model的文件夹内创建相应的JS文件去请求后台,例如demo中的like.js。10、在小程序的JS文件中,声明的data对象是该js文件中的私有变量,properties是公开的属性,外部可以访问,如果需要从外部传递进来,那么就需要将属性声明在properties中。不要在data和properties中声明相同的变量,那样会覆盖掉其中的一个变量。11、修改data对象中的属性要使用this.setData方法来设置。12、不要在properties的属性中,修改属性本身的值。index: {      type: Number,      observer: function(newVal, oldVal, changedPath) { //当组件的值被改变时,会主动的调用observer        //newVal:改变之后的值。        //oldVal:改变之前的值。        let val = newVal < 10 ? '0' + newVal : newVal;        this.setData({          index:val//错误的写法。会导致内存泄漏。        });      }    }13、在小程序中使用缓存的时候,要确定哪些部分是可以被缓存的,哪些是不能缓存的。(页面会实时发生变化的内容就是不能被缓存的)14、小程序内置的标签是可以使用hidden=“{
{
true}}”属性来控制其显示与否的。但是开发者自己编写的组件就无法使用hidden属性来控制其显示或影藏(除非放在自己开发组件的所在WXML文件的view标签内)。可以使用 wx:if="{
{true}}" 来控制自己编写的组件的隐藏与否。如果需要频繁的切换组件的显示或隐藏,那么微信官方推荐使用hidden,而如果不是频繁切换的话,那么微信官方推荐使用wx:if来控制组件的显示或隐藏。15、在老板小程序中存在模板template这个概念,在template中可以提取共用的wxml和wxss内容实现组件的元素共用。新的小程序中,可以创建一个common.wxss文件。然后再所要引用的wxss文件中,使用@import "../common.wxss";将样式导进来在小程序中播放音乐有两种方式,老的那种方式存在一定的bug,建议采用新的播放方式:背景音乐播放管理wx.getBackgroundAudioManage()来做。16、小程序中的behavior可以多继承,当父类中存在一个属性,并且子类中也声明了该属性时,子类中的属性会覆盖掉父类中的那个属性(两个属性的名字相同,但是类型不同)。但是声明周期函数不会覆盖,而是以此执行。17、使用 @import "../common.wxss"; 可以为wxml文件引入公用的样式。18、16和17分别解决了在小程序中复用js和wxss的问题,在wxml也可以通过模板的方式进行复用,但是在组件中复用wxml的话带来的意义并不是特别的大。19、navi组件和music组件之间的通信,可以通过classic组件进行传递。子组件(navi)通过事件的方式将数据传递给父组件(classic),然后父组件再传递给另外一个子组件(music)20、wx:key 如果wx:for后面遍历的是一个object,可以使用object下的某一个属性来作为wx:key的取值,且该属性需要满足不重复且是数字或者是字符串。如果wx:for需要遍历的是一个数组或者字符串的话,那么wx:key后面的取值是*this。21、在小程序中使用wx.navigateTo()进行小程序页面的跳转。让组件去进行页面的跳转会降低组件的通用性。如果在主页面中进行跳转,需要在组件的js文件中使用triggerEvent将组件内的参数传递到主页面,再在主页面中进行页面跳转。如何取舍?如果编写的组件不会和其他的项目进行共用,那么就可以在组件内部进行页面跳转。22、组件之间的传参是通过properties中的属性进行传参的。而页面之间的传参是通过onload生命周期函数的options参数中。const id=option.id。就能接收到从外部传入的id了。23、slot,插槽。感觉上像是一个占位符,可以在组件的外部向组件内部传递一个wxml标签。如果不传递,也不会有任何的显示。在组件中需要声明属性 options:{ multipleSlots:true },
{
{text}}
//这里预留一个插槽。
使用的时候需要将传入的标签,包裹在组件标签的内部:
//block用于循环,不是slot的相关知识点。
{
{'+'+item.nums}}
//after是插槽的名字。
24、在v-tag标签中加入属性 tag-class="ex-tag",然后在tag组件的js文件中写上externalClasses:['tag-class'],然后在再tag.wxml文件的view标签中增加class='tag-class',这样就可以引入外部样式了。如果标签中存在多个样式,那么可能会造成冲突。样式加不上去。如果外部样式想要覆盖普通样式,可以使用!important就可以覆盖普通样式了。.ex-tag{ background-color:#effbdd !important; }25、WXS相当于在html标签中直接调用JS代码,可以用来写小程序的过滤器。小程序中的WXS只支持ES5的语法。WXS中文本并不默认解析转义字符例如   。当需要解析这些转义字符时,可以在调用过滤器的标签上添加属性decode。例如:
{
{util.format(book.summary)}}
中的 decode='{
{true}}'26、下滑加载更多有两种实现方式:scroll-view和Page的onReachBottom,推荐使用onReachBottom。onReachBottom在组件中无法使用,所有要在Page中使用,并结合12点中的observer来实现下滑后,加载更多内容的动作。(在组件中定义一个属性,然后生成随机字符串或者随机数,在page中每次触发onReachBottom后,更改组件中属性的值,从而使用observer)27、小程序中,属性的名字尽量不要用驼峰命名法。在js中声明了一个属性openType,在wxml文件中使用的时候,使用连字符来调用。open-type="xxxx"28、获取授权:老版本使用wx.getUserInfo来弹窗询问是否授权。新版本需要使用小程序中的组件button来获取授权。 在.wxml文件中,使用29、如果要在一个小程序中跳转到另一个小程序中,那么这2个小程序要关联同一个公众号。 使用navigator组件(小程序自带的组件)

 

1、通常情况下小程序的背景色backgroundColor要和页面的颜色设置成同一颜色。2、justify-content 设置的是主轴上的对齐方式,而align-items 设置的是交叉轴上的对齐方式。通过观察flex-direction的值来判断 竖直方向还是水平方向哪一条是主轴。若flex-direction: column;那么竖直方向上为主轴,若flex-direction:row,那么水平方向上为主轴。3、当一行内所有元素的宽度相加超过屏幕的宽度时,flex布局会将每一个元素进行压缩,以保证所有的元素都能显示在同一行内。为了让元素换行,可以使用flex-wrap: wrap4、小程序中的像素单位rpx可以根据设备的屏幕进行自适应。若一个字体设置成22px,那么不管设备是IP5还是IP6都会显示同样大的字,但是使用了rpx作为单位之后,在IP5上显示的字会小于IP6上的字。5、在全局样式表(app.wxss)中定义的样式,只有font和color才会被组件继承,其他的样式都不会被组件继承(这样确保了组件的封闭性)。但是几乎所有的样式都可以被page给继承。6、在设计组件时,尽量不要让组件产生一些无意义的空白。7、使用bind:tap="onClick"来为页面元素绑定响应时间,此处为单击事件。catch:tap可以阻止冒泡事件。8、组件复用,代码分离。9、一般不会将请求后台的代码写在组件中。如果组件中需要请求后台了应该是model的文件夹内创建相应的JS文件去请求后台,例如demo中的like.js。10、在小程序的JS文件中,声明的data对象是该js文件中的私有变量,properties是公开的属性,外部可以访问,如果需要从外部传递进来,那么就需要将属性声明在properties中。不要在data和properties中声明相同的变量,那样会覆盖掉其中的一个变量。11、修改data对象中的属性要使用this.setData方法来设置。12、不要在properties的属性中,修改属性本身的值。index: {      type: Number,      observer: function(newVal, oldVal, changedPath) { //当组件的值被改变时,会主动的调用observer        //newVal:改变之后的值。        //oldVal:改变之前的值。        let val = newVal < 10 ? '0' + newVal : newVal;        this.setData({          index:val//错误的写法。会导致内存泄漏。        });      }    }13、在小程序中使用缓存的时候,要确定哪些部分是可以被缓存的,哪些是不能缓存的。(页面会实时发生变化的内容就是不能被缓存的)14、小程序内置的标签是可以使用hidden=“{

{true}}”属性来控制其显示与否的。但是开发者自己编写的组件就无法使用hidden属性来控制其显示或影藏(除非放在自己开发组件的所在WXML文件的view标签内)。可以使用 wx:if="{
{true}}" 来控制自己编写的组件的隐藏与否。如果需要频繁的切换组件的显示或隐藏,那么微信官方推荐使用hidden,而如果不是频繁切换的话,那么微信官方推荐使用wx:if来控制组件的显示或隐藏。15、在老板小程序中存在模板template这个概念,在template中可以提取共用的wxml和wxss内容实现组件的元素共用。新的小程序中,可以创建一个common.wxss文件。然后再所要引用的wxss文件中,使用@import "../common.wxss";将样式导进来在小程序中播放音乐有两种方式,老的那种方式存在一定的bug,建议采用新的播放方式:背景音乐播放管理wx.getBackgroundAudioManage()来做。16、小程序中的behavior可以多继承,当父类中存在一个属性,并且子类中也声明了该属性时,子类中的属性会覆盖掉父类中的那个属性(两个属性的名字相同,但是类型不同)。但是声明周期函数不会覆盖,而是以此执行。17、使用 @import "../common.wxss"; 可以为wxml文件引入公用的样式。18、16和17分别解决了在小程序中复用js和wxss的问题,在wxml也可以通过模板的方式进行复用,但是在组件中复用wxml的话带来的意义并不是特别的大。19、navi组件和music组件之间的通信,可以通过classic组件进行传递。子组件(navi)通过事件的方式将数据传递给父组件(classic),然后父组件再传递给另外一个子组件(music)20、wx:key 如果wx:for后面遍历的是一个object,可以使用object下的某一个属性来作为wx:key的取值,且该属性需要满足不重复且是数字或者是字符串。如果wx:for需要遍历的是一个数组或者字符串的话,那么wx:key后面的取值是*this。21、在小程序中使用wx.navigateTo()进行小程序页面的跳转。让组件去进行页面的跳转会降低组件的通用性。如果在主页面中进行跳转,需要在组件的js文件中使用triggerEvent将组件内的参数传递到主页面,再在主页面中进行页面跳转。如何取舍?如果编写的组件不会和其他的项目进行共用,那么就可以在组件内部进行页面跳转。22、组件之间的传参是通过properties中的属性进行传参的。而页面之间的传参是通过onload生命周期函数的options参数中。const id=option.id。就能接收到从外部传入的id了。23、slot,插槽。感觉上像是一个占位符,可以在组件的外部向组件内部传递一个wxml标签。如果不传递,也不会有任何的显示。在组件中需要声明属性  options:{    multipleSlots:true  }, <view class='container'>  <text>{
{text}}</text>  <slot name="after"></slot> //这里预留一个插槽。</view>使用的时候需要将传入的标签,包裹在组件标签的内部:      <block wx:for="{
{comments}}"> //block用于循环,不是slot的相关知识点。        <v-tag text="{
{item.content}}">          <text slot="after">{
{'+'+item.nums}}</text> //after是插槽的名字。        </v-tag>      </block>
24、在v-tag标签中加入属性 tag-class="ex-tag",然后在tag组件的js文件中写上externalClasses:['tag-class'],然后在再tag.wxml文件的view标签中增加class='tag-class',这样就可以引入外部样式了。如果标签中存在多个样式,那么可能会造成冲突。样式加不上去。如果外部样式想要覆盖普通样式,可以使用!important就可以覆盖普通样式了。.ex-tag{background-color:#effbdd !important;}
25、WXS相当于在html标签中直接调用JS代码,可以用来写小程序的过滤器。小程序中的WXS只支持ES5的语法。WXS中文本并不默认解析转义字符例如 &nbsp; 。当需要解析这些转义字符时,可以在调用过滤器的标签上添加属性decode。例如:<text class='content' decode='{
{true}}'>{
{util.format(book.summary)}}</text> 中的 decode='{
{true}}'
26、下滑加载更多有两种实现方式:scroll-view和Page的onReachBottom,推荐使用onReachBottom。onReachBottom在组件中无法使用,所有要在Page中使用,并结合12点中的observer来实现下滑后,加载更多内容的动作。(在组件中定义一个属性,然后生成随机字符串或者随机数,在page中每次触发onReachBottom后,更改组件中属性的值,从而使用observer)27、小程序中,属性的名字尽量不要用驼峰命名法。在js中声明了一个属性openType,在wxml文件中使用的时候,使用连字符来调用。open-type="xxxx"28、获取授权:老版本使用wx.getUserInfo来弹窗询问是否授权。新版本需要使用小程序中的组件button来获取授权。在.wxml文件中,使用<button open-type="getUserInfo" bindgetuserinfo="getUser">授权</button>29、如果要在一个小程序中跳转到另一个小程序中,那么这2个小程序要关联同一个公众号。使用navigator组件(小程序自带的组件)<navigator target="miniProgram" app-id="wx8ffc97ad5xxxxxxx" "><image src='' /></navigator>

转载于:https://www.cnblogs.com/vichin/p/10744154.html

你可能感兴趣的文章
用GoAccess分析Nginx的日志
查看>>
我的友情链接
查看>>
iOS客户端调微信支付只出现确定按钮的问题
查看>>
Windows下安装MongoDB
查看>>
virtualbox不能安装64位系统的解决方法
查看>>
选型 - QA testing tools 2/26/2016
查看>>
Linux培训大纲
查看>>
sqlalchemy(一)基本操作
查看>>
Python: pip常见的使用方法
查看>>
CSS 专业技巧收集
查看>>
centos7 链接网络
查看>>
myblog test
查看>>
ReentrantLock 实现原理
查看>>
初识Ansible
查看>>
监控mysql从服务器状态
查看>>
迭代模式
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
浅谈linux启动流程
查看>>
java/strust2实现多文件上传
查看>>