小程序注意点

1，ctrl+p，全局搜索

2.项目设置，增强编译（使用es7,async,await），使用npm模块，不校验合法域名(开发基于

3,

/代表根路劲，<image src="/images/avatar/1.png" src="200px;heigth:200px"></image>

4. 小程序不用px单位，小程序有自己的自适应机型的单位，rpx,

5. 高200px,宽200px的图片在微信工具中显示椭圆，应该是正圆的，因为他自己封装了image标签

tip：image组件默认宽度320px、高度240px
tip：image组件中二维码/小程序码图片不支持长按识别。

但是在页面组件中设置样式后，会覆盖imag原本的样式，此时就是正圆的

<image src="/images/avatar/1.png" style="200rpx;height:200rpx"></image>

6,样式类名一般不用驼峰，使用——连接

.head-image

 

7. view标签相当于div标签， text是文本标签，每个页面组件都有个影藏的page标签包裹在外头

 

8.边框可以用1px

border: 1px solid #405f80;

9. app.json全局window属性配置，官网；全局window配置，https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

 

10.普通页面跳转到带有tarbar页面，不能用wx.redirect跳转，使用wx.switchTab

 

11.底部tabbar配置，app.json配置，官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

 

12.vertical="true",是为真， vetical="false", 也是为真，引号里头是字符串。 2.如果该属性要为假，加双花括号，里头为js表达式，这个是小程序语法 vertical="{{false}}"

13.this.setData的数据会加入到page.data中，绑定数据

14.切换后台，触发onhide,页面影藏， 在次切换前台，触发onshow

15.

naigateTo是保留当前页面，跳转到子页面
redirecTo是不保留当前页面，跳转到子页面

16.

有个假设需求，如果点击整个view父容器，跳转到信息详情页，但是点击图片头像需要跳转到个人中心页，此时该如何做呢

给view父容器绑定bindtap事件，他是可以冒泡的， 给image绑定catchtap事件，他是阻止冒泡的，避免传递给父容器

  <view bind:tap="onTap" class="post-container">
        <view class="post-author-date">
            <image catch:tap="onMaxImage" class="post-author" src="{{res.avatar}}"></image>
            <text class="post-date">{{res.date}}</text>
        </view>

17.给某个标签自定义属性，自定义属性post-id， 获取属性是postId

  <view bind:tap="onTap"  data-post-id="{{res.postId}}" class="post-container">

获取自定义属性

onGoToDetail(event) {
    // 获取自定义属性
    const pid = event.currentTarget.dataset.postId 

18.app.js，全局变量， cosnt app= getapp(),页面获取全局变量, 小程序重新启动，全局变量回到初始值

19.

小程序的缓存机制，wx.setstotageSync 设置缓存， wx.clearstotageSync清空全部缓存
wx.removeStorageSync('key),清空指定的缓存， wx.getStorageSync,读取缓存

20.背景音乐切换后台，在app.json配置requiredBackgroundModes属性

  "requiredBackgroundModes": [
    "audio",
    "location"
  ],

21.普通页面跳转到带有tarbar页面，不能用wx.redirect跳转，使用wx.switchTab，

 22.父组件监听子组件的事件，子组件向父组件传递数据

<block wx:for="{{postList}}" wx:key="index"  wx:for-item="item" wx:for-index="idx">
    <!-- 给post绑定posttap事件，监听 -->
    <post bind:posttap = "onGoToDetail" res="{{item}}"/>
</block>

js

 onGoToDetail(event) {
    // 获取自定义属性id， event.detail.pid，自定义事件传递过来的id
    const pid = event.currentTarget.dataset.postId | event.detail.pid;
    wx.navigateTo({
      url: "/pages/post-detail/post-detail?pid=" + pid,
    });
  },

子组件

  <view bind:tap="onTap" class="post-container">
        <view class="post-author-date">
            <image catch:tap="onMaxImage" class="post-author" src="{{res.avatar}}"></image>
            <text class="post-date">{{res.date}}</text>
        </view>

js

  methods: {
    onTap(event){
      const pid = this.properties.res.postId
      // 触发自定义事件posttap，传递pid
      this.triggerEvent('posttap',{
        pid
      })
    },
  }

 23.页面组件引入子组件，可在app.json中全局引入，也可在页面组件中引入

页面组件

<!-- 搜索的结构 -->
<view class="search-container" wx:else>
  <block wx:for="{{searchData}}" wx:key="index">
    <movie class="movie" movie="{{item}}" />
  </block>
</view>

页面组件引用，json文件

{
  "usingComponents": {
    "movie":"/components/movie/index"
  },

或者app.json全局引入

  "usingComponents": {
    "movie": "/components/movie/index",
}

 24. 实现影人中图片左右滚动效果，引入小程序组件scroll-view组件，但是会放flex布局失效，需要添加enable-flex 让其生效，并且会是容器留有很大高度，给容器高度重新设置下

 <scroll-view enable-flex scroll-x class="casts-container">

.casts-container{
  display: flex;
  flex-direction: row;
  margin-bottom: 50rpx;
  margin-right: 40rpx;
  height: 300rpx;
}

25.图片的mode模式，给image标签添加mode="aspectFill"缩放模式，官网https://developers.weixin.qq.com/miniprogram/dev/component/image.html

 <image mode="aspectFill" class="head-img" src="{{movie.image}}"></image>