微信小程序知识总结及案例集锦

brownsnake 发布于10月前 阅读586次
0 条评论

微信小程序知识总结及案例集锦

微信小程序的发展会和微信公众号一样,在某个时间点爆发

学习路径

  1. 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档

  2. 认真跟着文档看一遍,相信有vue前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具

  3. 新建一个quick start项目,了解代码结构,这里附上整个quick start代码。

  4. 然后就拿个顺手的api练练手,这里附上 cnode代码 ,跟着做完差不多就算入门了。

  5. 入门之后就是看其他项目的实现了,这里会附上 案例集锦 ,一些github的案例。

知识总结

tip:看到了另一份 W3CSchool整理的文档 ,可以结合官方文档一起看

目录结构介绍

  • app.js — 对本页面的窗口表现进行配置。
  • app.json — 对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  • app.wxss — 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。

页面生命周期

  1. 小程序注册完成后,加载页面,触发onLoad方法。
  2. 页面载入后触发onShow方法,显示页面。
  3. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  4. 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  5. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

常规页面A:onLoad()-->onShow()-->onReady()-->onHide()-->onUnload()

释义:

  • onLoad():监听页面加载,一个页面只会调用一次
  • onShow():监听页面显示,每次打开页面都会调用一次
  • onReady():监听页面初次渲染完成,一个页面只会调用一次,代表页面加载完毕,视图层和逻辑层可进行交互
  • onHide():监听页面隐藏,当页面被覆盖或进入后台执行
  • onUnload():监听页面卸载,当页面被关闭或内存不足主动销毁页面

wx.navigateTo跳转状态下,页面A和页面B的生命周期逻辑

  1. 进入A页面:A执行onLoad()-->onShow()-->onReady();
  2. A页面navigateTo B页面:A执行onHide(),B执行onLoad()-->onShow()-->onReady();
  3. B页面返回A页面:B执行onUnload(),A执行onReady();
  4. 退出A页面:A执行onUnload()。

    Page({
      data:{},
      onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
    // 页面渲染完成
      },
      onShow:function(){
    // 页面显示
      },
      onHide:function(){
    // 页面隐藏
      },
      onUnload:function(){
    // 页面关闭
      }
    })

    微信小程序知识总结及案例集锦

组件

  • 基本:view,text
  • 表单:button,input,radio,slider
  • 媒体:image,video,audio,canvas
  • 模态:action-sheet,modal,toast,loading
  • 容器:swiper,scroller
  • 导航:navigator,tabbar

小程序开发踩坑记录

  1. 小程序页面空白
    • css兼容性问webkit内核
    • lineShopId长度太长,字符转数字Number
    • post请求参数加上encodeURIComponent解析字符串
  2. header要设置正确
    • get "content-type":'application/json'
    • post "content-type":'application/x-www-form-urlencoded'
    • content-Type:application/x-www-form-urlencoded,application/json
  3. bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
  4. image背景图片地址必须是url或者base64/本地资源无法通过 css 获取 可以使用网络图片,或者 base64,或者使用标签
  5. 使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。如果scroll-view高度设置为100%,则不能触发上拉刷新和下拉加载事件......
  6. App() 小程序注册入口,全局唯一。App()用来注册一个小程序,全局只有一个,全局的数据也可以放到这里面来操作。

    // 注册微信小程序,全局只有一个
    let appConfig = {
        // 小程序生命周期的各个阶段
        onLaunch: function(){},
        onShow: function(){},
        onHide: function(){},
        onError: function(){},
    
        // 自定义函数或者属性
        ...
    };
    App(appConfig);
    
    // 在别的地方可以获取这个全局唯一的小程序实例
    const app = getApp();

    小程序并没有提供销毁的方式,所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候,才会被真正的销毁。

  7. Page() 页面注册入口。Page()用来注册一个页面,维护该页面的生命周期以及数据。

    ```

    // 注册微信小程序,全局只有一个

    let pageConfig = {

    data: {},

    // 页面生命周期的各个阶段

    onLoad: function(){},

    onShow: function(){},

    onReady: function(){},

    onHide: function(){},

    onUnload: function(){},

    onPullDownRefresh: function(){},

    onReachBottom: function(){},

    onShareAppMessage: function(){},

    // 自定义函数或者属性

    ...

    };

    Page(pageConfig);

// 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面

const page = getCurrentPages();

```

  1. {{}} 不能执行方法,只能处理简单的运算如 “+ - * /”,比如遇到遍历list,每个item的金额需要格式化,只能在js里预先格式化好再setData一遍( ╯□╰ )
  2. 数字键盘用 type="digit"
  3. 禁止页面下拉需要设置 "disableScroll": true

案例集锦

tip:从案例里可以看到很多其他小程序实现的方式,多多看代码

更多

持续踩坑中...

后续会进行不断更新,订阅请点watch,收藏请点star,欢迎开 issues 来提问

查看原文: 微信小程序知识总结及案例集锦

  • greenostrich
  • smallgoose
  • whitetiger
  • silverpeacock
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。