美文网首页
小程序笔记(1)

小程序笔记(1)

作者: 草丛伦 | 来源:发表于2018-09-15 20:22 被阅读133次

    小程序 简易教程

    https://mp.weixin.qq.com/debug/wxadoc/dev/

    稍微写点好了,本来是打算直接写到项目里面的,但是.json的配置文件里面好像不可以添加注释,所以 哎 无奈。

    前面的废话不说了,看代码构成 。 微信还是以前端的MVVM模式来做的。 传统的HTML 是HTML+CSS+JS ,微信类似于这种,为WXML+WXSS+JS 一一对应咯。

    WXML为页面结构,WXSS为页面样式 JS为页面逻辑。

    JSON配置:

    1.app.json 小程序配置 即全局配置 ,所谓配置 一般就是配置界面样式(window)顶部标题 颜色 等 ,还有项目文件路径(pages)。
    2.project.config.json 这个也是配置,但是是工具配置,跟当前的IDE开发工具有关,目的是即使换电脑了,拷贝这个文件过去覆盖也可以轻松完成工具配置。跟项目无关。
    3.page.json 页面配置 针对单独页面做的配置了。比如初始化项目后出现的log.json ,可以在上面定义一些页面单独的属性,比如是否可以下拉刷新 ,页面标题什么的。
    

    WXML模板:

    //pages/index/index.wxml 
    //相对于前端 很多标签不一样了,其实也就是小程序对这些标签做了一定的封装,特别是地图 音频 视频等等 ,可以直接找到指定的标签放进去就可以了。
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
        <block wx:else>
          <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    
    2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式. {{}}是用js里面的参数。通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
    

    WXSS 样式:

    1.小程序增加了一个尺寸类型 rpx,避免换算的问题。
    提供全局样式 跟局部样式,比如app.wxss 就是全局样式。log.wxss 就是局部样式。
    

    JS交互逻辑:

    比如一些点击事件 用户反馈之类的,都是在js里面写的。
    <button bindtap="clickMe">点击我</button>
    bindtap就是绑定事件,然后在js里面写好这个方法就可以了。
    小程序提供了非常多的api,例如获取用户信息、本地存储、微信支付等。
    

    tip:

    1.微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。然后加载渲染出app出来。

    2.程序启动会有回调,相当于app的生命周期嘛:

    App({
      onLaunch: function () {
        // 小程序启动之后 触发 可以玩点刺激的
      }
    })
    

    3.整个小程序只有一个 App 实例,是全部页面共享的

    4.页面渲染完毕后 也是有回调的,在js文件里面写就行

    Page({
      data: { // 参与页面渲染的数据
        logs: []
      },
      onLoad: function () {
        // 页面渲染后 执行
      }
    })
    

    Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。

    在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。


    小程序 框架

    全局配置 除了 pages 跟window属性,还有 tabBar,networkTimeout,debug等

    小程序 框架

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html

    一个页面由四个文件组成

    文件类型    必需  作用
    js          是      页面逻辑
    wxml        是      页面结构
    json        否      页面配置
    wxss        否      页面样式表
    

    配置

    全局配置的属性

    pages :指向页面文件的路径(每次创建貌似都要写一个)
    window:页面顶部的属性 比如文字 颜色 能否下拉刷新 等
    tabBar:设置底部tabbar,用list包裹 里面pagePath指向路径,text定义名字
    networkTimeout:设置网络超时时间 
    debug :是否开启debug模式,用来定位问题,默认关闭
    functionalPages:是否开启页面插件功能。默认关闭 不知道啥用
    subPackages: 分包功能 听起来有点像是插件化的功能
    workers:worker代码放置的位置 ,为了处理多线程?
    requiredBackgroundModes:需要在后台使用到的功能,比如项目中使用到了音乐播放的话,可以写到这里面去
    其他的 就不写了 ,感觉没啥必要。
    

    文档写的太清楚了 有点不大想写这个笔记了。

    app.json跟局部配置.json文件有相同设定的时候,也是根据就近原则,用最近的。

    逻辑

    前端的逻辑都是写在.js文件上面,用javascript引擎。 逻辑层处理数据,发送数据给视图层,并且接收视图层的反馈。 开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。 在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

    增加 App 和 Page 方法,进行程序和页面的注册。 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。 每个页面有独立的作用域,并提供模块化能力。 注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。

    小程序 逻辑层

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html

    App(Object)

    用来注册一个小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
    App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
    这个方法有点类似于application的onCreate方法。
    
    里面参数涉及一系列的监听方法,小程序初始化启动,小程序前后台切换,甚至一些问题都可以展示出来。
    

    关于小程序销毁,说是关闭并没有销毁小程序,而只是进入了后台,只有在资源不足的情况下,才会销毁,但是我发现部分手机 比如我自己的360N5,死也不销毁,卡的爆炸,需要手动去一键加速搞定他。

    App({
      onLaunch: function(options) {
        // Do something initial when launch.
        //类似于application的onCreate,在options又能拿到一堆信息,比如进入的渠道(场景值) 等,
      },
      onShow: function(options) {
        // Do something when show.
        //类似于application的从后台转前台监听
      },
      onHide: function() {
        // Do something when hide.
            //类似于application的从前台转后台监听
      },
      onError: function(msg) {
        console.log(msg)
        //错误提醒,用于debug,应该要设置debug的属性才可以,错误信息,包含堆栈
      },
      globalData: 'I am global' //定义的全局变量
    })
    

    getApp()可以获取小程序实例 可以拿到里面定义的变量 ,比如上面的globalData ,当然在App方法里面 直接用this就能拿到实例。

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

    app.js里面可以做全局的监听 ,用的是App()方法 页面也有自己的js文件,里面用的是Page()方法,监听的更加到位 ,相当于android里面的所有生命周期都有

    //index.js
    Page({
      data: {
        //数据 可以填多个 按照这个样式就行,要json格式
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
        //类似 activity onCreate()
      },
      onReady: function() {
        // Do something when page ready.
        //类似 activity onStart(),但是一个页面只会调用一次
      },
      onShow: function() {
        // Do something when page show.
        //类似activity onResume()
      },
      onHide: function() {
        // Do something when page hide.
        //类似activity onPause
      },
      onUnload: function() {
        // Do something when page close.
        //类似 activity onDestroy()
      },
      onPullDownRefresh: function() {
        // Do something when pull down.
        //下拉刷新监听
      },
      onReachBottom: function() {
        // Do something when page reach bottom.
        //上拉加载监听
      },
      onShareAppMessage: function () {
        // return custom share data when user share.
        //右上角分享监听 
        //注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
      },
      onPageScroll: function() {
        // Do something when page scroll
        //滚动监听
      },
      onTabItemTap(item) {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
        //当前是tab页的话 点击tab监听
      },
      // Event handler.自定义方法处理事件
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        }, function() {
          // this is setData callback
        })
      },
      customData: {
        hi: 'MINA'//开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问
      }
    })
    

    稍微需要注意一点的是 Object 内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销。并且必须是json格式的。

    Page.prototype.setData(Object data, Function callback)
    

    setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

    以为小程序是跟Vue一样,改变值就可以直接同步到视图层的,现在看来不是这样的,需要调用setData才可以将视图层绑定的数据修改,这样才能作用到视图层,不然直接修改是没有作用的 而且会有数据不一致的风险。 当然,如果你数据本身就只是一个参数,比如说page,跟视图层不绑定的,那就直接改呗。

    以上所写更类似于笔记,毕竟官方文档太清晰的。

    相关文章

      网友评论

          本文标题:小程序笔记(1)

          本文链接:https://www.haomeiwen.com/subject/smmtnftx.html