• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序商业级实战

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、微信开放能力:微信支付、微信登录、二维码生成、分享

 2、http://www.7yue.pro/

3、flex的一个特性

只要父元素设定了display:flex,子元素就是失去块元素属性

举个例子:

<view>
    <view class="chunck t1">t1</view>
    <view class="chunck t2">t2</view>
    <view class="chunck t3">t3</view>
</view>

效果:

父元素加了display:flex

.container{
    display: flex;
}

<view class="container">
    <view class="chunck t1">t1</view>
    <view class="chunck t2">t2</view>
    <view class="chunck t3">t3</view>
</view>

4、微信小程序里的绝对路径和相对路径

新建一个组件,将其引入

{
  "usingComponents": {
    "v-like": "components/like/index"
  }
}
<view class="container">
    <v-like></v-like>
</view>

 

这时会报错

 

原因:这时使用的是相对路径,引入的组件是相对于classic的

解决办法:

第一种:

{
  "usingComponents": {
    "v-like": "../../components/like/index"
  }
}

找到正确的路径

第二种:使用绝对路径

{
  "usingComponents": {
    "v-like": "/components/like/index"
  }
}

这俩种都可以,看自己喜欢哪个

5、const不能改变,说的是内存地址不能改变

const config = {
  name: 'zb'
}

config = 2 // 报错

config.name = 'zb1' // 没有报错

修改config里的属性值不会报错,因为没有改变内存地址

但是赋值为2,修改了内存地址,所以报错

 6、自定义事件   https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

this.triggerEvent('myevent', myEventDetail, myEventOption)

使用triggerEvent定义

myevent是事件名
myEventDetail 是属性

例子:
 // **
      let behavior = this.properties.like?'like':'cancel'
      this.triggerEvent('like',{
        behavior: behavior
      })


  <v-like bind:like="onLike" like="{{classic.like_status}}" count="{{classic.fav_nums}}"></v-like>

onLike:function(event) {
console.log(event)
},

自定义事件时传入的参数,会出现在detail中

自定义的组件把事件一层一层传递,直到page

7、组件的生命周期  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

要想输出定义的properties和data里的属性,可以在attached里输出

8、不要在属性的observer里面操作这个属性

这是错误的,会报下面的错误

 9、

align-items: baseline;

保证元素基于底部对齐

 10、纯粹回调、Promise与async、await

纯粹callback回调:回调地狱  return 只是一种代码风格 看着复杂 不代表不能实现功能

promise:代码风格比纯粹的callback好  多个异步等待合并 promise也可以传递callback,但是不需要层层传递callback,因为promise没有剥夺函数的return能力

最佳的异步处理方案async、await : ES2017提出的  小程序不支持 

 

Promise是一个对象,而不是函数

因为在面向对象思想里,对象是可以保存状态的,而函数不可以保存(闭包函数可以保存)

promise的精髓是用对象的形式保存了异步调用的结果

promise作为一个对象,是可以赋值给一个变量的,而且这个变量可以在我们的代码中到处传递,不需要附带任何的回调函数。只有在需要的时候才要传入回调函数

const promise = new Promise((resolve, reject) => {
      wx.getSystemInfo({
        success:(res) => {
          resolve(res)
        },
        fail: (error) => [
          reject(error)
        ]
      })
    })
    promise.then((res) => {
      console.log(res)
    },(error) => {
      console.log(error)
    })

 11.、我们使用flex布局的时候,会出现各种奇怪的问题,原因就是因为没有设置宽度和高度,所以我们最好给用到的div设置宽为100%

12、真机预览小程序:点击微信开发工具的预览按钮,扫描生成的二维码。如果要请求后端的接口,就在手机上点击右上角的三个点,点击打开调试,然后重新打开小程序

13、behaviors 类似于vuex中的mixins 把多个组件都用到的属性和方法抽取出来放到这个文件里

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

Behavior文件
let classicBeh = Behavior({
  properties: {
    img: {
      type: String
    },
    content: {
      type: String
    }
  },
  data: {

  },
  methods: {

  }
})

export { classicBeh }
import { classicBeh } from '../classic-beh'

Component({

  behaviors: [classicBeh],

  /**
   * 组件的属性列表
   */
  properties: {
  },

备注:

    1、一个组件可以引入多个behavios文件

    2、如果多个behavios文件里有相同的properties和data,取最后一个behavios文件里的

    3、如果组件里有相同的properties和data,组件里的覆盖behavios文件里的

    4、如果组件和properties文件里都有attached,按次序执行

 

14、在使用缓存的时候,可能会出现很多奇怪的问题,有可能是缓存引起的,就算是重新编译或者重启微信开发工具也不行,这时候就要清除缓存

15、使用@import引入样式文件

16、https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if vs hidden

如何让自定义组件支持hidden

我们在自定义组件上直接写hiddern=""是没有效果的

但是在<view>上写却可以

所以我们可以把hidden传递给自定义组件,在自定义组件的<view>上写hiddern=""

wx;if true或false的时候,会执行完整的生命周期,消耗资源多

hidden 只会显示和隐藏  初始化以后不会再执行完整的生命周期

hidden的一个特点:不能触发组件生命周期的detached

17、微信小程序的音乐API    BackgroundAudioManager 

使用实例

const mMgr = wx.getBackgroundAudioManager()

mMgr.src = this.properties.src // 设置src 自动播放
mMgr.title = this.properties.title //必须

 切换组件的时候,停止音乐播放

解决方案一:

       在组件的detached生命周期中调用  mMgr.stop()

       这种方法有个问题:只要一切换音乐播放就会停止

解决方案二:

       通过判断当前播放的src和当前组件传进来的src,如果一致:按钮为暂停按钮,反之为播放按钮

        

if (mMgr.src === this.properties.src) {
        this.setData({
          playing: true
        })
      }

 18、promise的正确用法

我们调用promise方法以后,如果要继续调用其他的promise方法,一般这样写

bookModel.getHotList()
      .then(res => {
        console.log(res)
        bookModel.getMyBookCount()
          .then((res) => {
            console.log(res)
            bookModel.getMyBookCount()
              .then(res => {
                console.log(res)
              })
          })
      })

上面这种方法不好,类似于回调地狱

推荐使用下面的方法

bookModel.getHotList()
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
      })

调用promise方法后返回出去,这样就可以使用then进行下一个操作

 19、从别的页面跳转到相应页面,url中携带的参数,都在生命周期onLoad里的options中

20、微信小程序中的slot https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件wxml的slot

<!-- 组件模板  slot使用name进行区分 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

备注:如果要使用slot,一定要在定义slot的组件js页面假如

options: {
    multipleSlots: true // 在组件定义时的选项中启用slot支持
  },

文档里说的是多slot的时候需要加这个,测试中发现,一个或多个都需要用slot

 21、微信小程序可以从父组件传递自定义的样式  

外部样式类

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

 22、wxs 语法类似于es5语法  定义以后  可以在wxml中使用

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

 23、input组件有个特殊的方法 bindconfirm   用键盘输入完成后会触发

24、编程思想:有些数据能前端处理的,就不要麻烦后端

25、微信小程序分为逻辑层和视图层,数据从逻辑层发送到视图层,需要用到setData

       这需要消耗资源,如果视图层用不到的话,可以使用this.data改变data里定义的值

26、open-data和getUserInfo的区别

      都可以获取用户信息

       open-data 不需要授权,直接展示用户信息  如果只是为了展示信息  可以用open-data

       getUserInfo 需要授权,可以通过Js获取用户信息

27、授权组件

      https://developers.weixin.qq.com/miniprogram/dev/component/button.html

 

<!--button原生组件,open-type需要设置为getUserInfo,getuserinfo方法用来获取用户信息-->
<button
  bind:getuserinfo="onGetUserInfo"
  open-type="{{openType}}"
  plain="{{true}}" // 按钮是否镂空,背景透明
  class="container"
>
  <slot name="img"></slot>
</button>

 需要从父组件传递的属性时openType

父组件使用

josn引入 
"usingComponents": {
    "v-button": "/components/image-button/index"
  }


<v-button
    wx:if="{{!authorized}}"
    bind:getuserinfo="onGetUserInfo"
    open-type="getUserInfo"  // 表示传给v-button的值是open-type
    class="avatar-position"
  >
    <image slot="img" class="avatar" src="/images/my/my.png" />
  </v-button>

 28、微信小程序中跳转另一个小程序

俩种方式:

   使用wx.navigateToMiniProgram

wx.navigateToMiniProgram({
      appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid
      path: 'page/index/index', // 跳转的目标页面
      extarData: {
        open: 'auth'
      },
      success(res) {
        // 打开成功  
      }
})

使用navigator组件

<navigator class="nav" target="miniProgram" app-id="wx8ffc97ad5bcccc89" open-type="navigate">
  <image class="vendor" src="/images/my/vendor.png"></image>
</navigator>

注意:从小程序A内跳转到小程序B内有一个前提条件:A和B必须被同一个公众号关联

29、分享功能  https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<button
  open-type="share"
>
  分享
</button>

可以使用button组件完成分享功能,open-type设置为share

<button
open-type="share"
>
分享
</button>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序组件----折叠日历发布时间:2022-07-18
下一篇:
小程序echarts太大发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap