小技巧

如果想开发时候在哪个页面。可以在编译器的顶部修改启动页面。

image.png

样式说明。

.info .detail {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
  border-bottom: 1px solid #ddd;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 16px;
}

设置固定的顶部位置

 position: fixed;
  top:0

文字不换行

 font-size: 28rpx;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap

100vh高度上的百分比。

如果js对象返回{},则可用undefined == options.title来判断。

box-shadow

和Android 类似 offset-x 是横向方向，offset-y是竖直方向的。
box-shadow: offset-x offset-y blur spread color inset;

  box-shadow: 3px 4px 4px #888888;

• offset-x：必需，取值正负都可。offset-x水平阴影的位置
• offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
• blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
• spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
• color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
• inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。

page：

默认设置整个页面的颜色

page{
  background-color: #faf6f3
}

可能会导致布局文件显示错位，空出一行。

 <text>诛仙1(2019)</text> 

如果改为这样

 <text>
诛仙1(2019)
</text>

小程序文本缩进

text-indent: 1cm

view class="movie-introduce-detail" style="text-indent:2em">
        <text>草庙村被屠，少年张小凡双亲离世，被青云门大竹峰收留。机缘巧合之下，他习得佛门天音功法，又意外获得魔教法器烧火棍，踏上强者之路的同时，也让他陷入了巨大的危机。至魔法器的现世，与陆雪琪、碧瑶、田灵儿三个女生间命运的交错，都让他原本单纯的人生轨迹充满变数。一个勇者驳斥命运的传奇之旅就此展
       </text>

      </view>
```'


##### 小程序的分享（转发）
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html


##### 组件样式
可使用 `:host` 选择器

:host {
color: yellow;
}

##### 页面和组件之间的数据传递
页面

my-component prop-a= "{{testA}}" prop-b= "{{testB}}"
propC = "{{testC}}"

<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
 <view>这里是插入到组件slot中的内容</view> 

</my-component>

组件

/**

• 组件的属性列表
  */
  properties: {
  propA:String,
  propB:String,
  propC:String
  }
  <view>{{propA}}</view>
  <view>{{propC}}</view>

##### 组件的生命周期
   ``` created attached detached ```

lifetimes:{
created: function(){
console.log("created")
},
attached:function(){
console.log("attached")
},
detached:function(){
console.log("detached")
}
}

##### 组件所在页面的生命周期

pageLifetimes:{
show:function(){
console.log("show")
},
hide:function(){
console.log("hide")
},
resize:function(){
console.log("resize")
}
}

##### 内置behaviors
[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html)
` behaviors: ['wx://form-field']` 可以识别表单内的单个表单控件。
`behaviors: ['wx://form-field-group']` 可以识别表单内的所有表单控件。