小程序基本简要教程

目录：

  • 文件目录介绍：
  • 配置
  • 逻辑
  • 视图
  • 自定义组件
  • 兼容

-----------------------------------------

  1. 文件目录介绍：

    一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

    app.js（必需；小程序逻辑） + app.json （必需；小程序公共设置）app.wxss（非必需；小程序公共样式表）

    一个小程序页面由四个文件组成，分别是：
    文件类型必填作用
    js 是 页面逻辑
    wxml 是 页面结构
    wxss 否 页面样式表
    json 否 页面配置

    注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

  2. 配置 --------------- app.json
    {
  "pages": [//每一项都是字符串，来指定小程序由哪些页面组成
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {//用于设置小程序的状态栏、导航条、标题、窗口背景色。
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {//用于设置小程序的状态栏、导航条、标题、窗口背景色。
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {//可以通过 tabBar 配置项指定 tab 栏的表现
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
    属性类型必填描述
    pages String Array 是 设置页面路径
    window Object 否 设置默认页面的窗口表现
    tabBar Object 否 设置底部 tab 的表现
    networkTimeout Object 否 设置网络超时时间
    debug Boolean 否 设置是否开启 debug 模式
  3. 逻辑层
    • 注册程序

      App(OBJECT)
      App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

      OBJECT参数说明：

      属性类型描述触发时机
      onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
      onShow Function 生命周期函数--监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
      onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
      onError Function 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
      其他 Any   开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

      getApp()
      全局的 getApp() 函数可以用来获取到小程序实例。

      注意：

      App() 必须在 app.js 中注册，且不能注册多个。
      不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
      不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
      通过 getApp() 获取实例之后，不要私自调用生命周期函数。



    • 场景值

      当前支持的场景值有：

      场景值ID 说明
      1001 发现栏小程序主入口
      1005 顶部搜索框的搜索结果页
      1006 发现栏小程序主入口搜索框的搜索结果页
      1007 单人聊天会话中的小程序消息卡片
      1008 群聊会话中的小程序消息卡片
      1011 扫描二维码
      1012 长按图片识别二维码
      1013 手机相册选取二维码
      1014 小程序模版消息
      1017 前往体验版的入口页
      1019 微信钱包
      1020 公众号 profile 页相关小程序列表
      1022 聊天顶部置顶小程序入口
      1023 安卓系统桌面图标
      1024 小程序 profile 页
      1025 扫描一维码
      1026 附近小程序列表
      1027 顶部搜索框搜索结果页“使用过的小程序”列表
      1028 我的卡包
      1029 卡券详情页
      1030 自动化测试下打开小程序
      1031 长按图片识别一维码
      1032 手机相册选取一维码
      1034 微信支付完成页
      1035 公众号自定义菜单
      1036 App 分享消息卡片
      1037 小程序打开小程序
      1038 从另一个小程序返回
      1039 摇电视
      1042 添加好友搜索框的搜索结果页
      1043 公众号模板消息
      1044 带 shareTicket 的小程序消息卡片（详情)
      1047 扫描小程序码
      1048 长按图片识别小程序码
      1049 手机相册选取小程序码
      1052 卡券的适用门店列表
      1053 搜一搜的结果页
      1054 顶部搜索框小程序快捷入口
      1056 音乐播放器菜单
      1058 公众号文章
      1059 体验版小程序绑定邀请页
      1064 微信连Wifi状态栏
      1067 公众号文章广告
      1068 附近小程序列表广告
      1072 二维码收款页面
      1073 客服消息列表下发的小程序消息卡片
      1074 公众号会话下发的小程序消息卡片
      可以在 App 的 onlaunch 和 onshow 中获取上述场景值，部分场景值下还可以获取来源应用、公众号或小程序的appId。详见

      Tip: 由于Android系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。

      • 注册页面

        Page

        Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

        //index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
  },
  onReady: function() {
    // Do something when page ready.一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  },
  onShow: function() {
    // Do something when page show.每次打开页面都会调用一次。
  },
  onHide: function() {
    // Do something when page hide.当navigateTo或底部tab切换时调用。
  },
  onUnload: function() {
    // Do something when page close.当redirectTo或navigateBack的时候调用。
  },
  onPullDownRefresh: function() {
    // Do something when pull down.下拉时做某事。
  },
  onReachBottom: function() {
    // Do something when page reach bottom.页面到达底部时做某事。
  },
  onShareAppMessage: function () {
   // return custom share data when user share.用户转发_1.只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮_2.用户点击转发按钮的时候会调用_3.此事件需要 return 一个 Object，用于自定义转发内容
  },
  onPageScroll: function() {
    // Do something when page scroll页面滚动触发事件的处理函数
  },
  // Event handler.事件处理函数,
        　//<view bindtap="viewTap"> click me </view>
          viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
        　　//自定义数据

            hi:         'MINA'
  }
})
    • 路由
      在小程序中所有页面的路由全部由框架进行管理。
    • 模块化

      文件作用域
      在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

      通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置.

      模块化
      可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

      需要注意的是：

      exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
      小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

    • API   小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

  4. 视图层

    WXML

    WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

    <!--wxml 数据绑定 -->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!--================== -->

<!--wxml 列表渲染-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

<!--================== -->

<!--wxml 条件渲染 -->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

<!--================== -->

<!--wxml 模板-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

<!--==================  事件 -->

<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})



    WXS

    WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

    <!--====================-->
<!--wxml 页面渲染-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

-----------------------------
页面输出：

hello world


<!--====================-->
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})


<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ? 
      array[i] : 
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

--------------------------
页面输出：

5

    注意
    wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
    wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
    wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
    wxs 函数不能作为组件的事件回调。
    由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

    WXSS

    WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

    基础组件

    框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。



  5. 自定义组件

    创建自定义组件
    类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

    {
  "component": true
}


    同时，还要在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模版和样式

    <!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

    使用自定义组件
    使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

    {
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}


//这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

//自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。

    Tips:

    对于基础库的1.5.x版本， 1.5.7 也同样支持自定义组件。
    因为WXML节点标签名只能是小写字母和下划线的组合，所以自定义组件的标签名也只能包含小写字母和下划线。
    自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
    自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
    旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。




  6. 兼容

    小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。

    文档会在组件，API等页面描述中带上各个功能所支持的版本号。

    可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。

    也可以通过 wx.canIUse 详情 来判断是否可以在该基础库版本下直接使用对应的API或者组件

    //////////////////////////////////
//兼容方式 - 接口
//对于新增的 API，可以用以下代码来判断是否支持用户的手机

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

//////////////////////////////////
//兼容方式 - 参数
//对于 API 的参数或者返回值有新增的参数，可以判断用以下代码判断。

wx.showModal({
  success: function(res) {
    if (wx.canIUse('showModal.cancel')) {
      console.log(res.cancel)
    }
  }
})

//////////////////////////////////
//兼容方式 - 组件 
//对于组件，新增的属性在旧版本上不会被处理，不过也不会报错。如果特殊场景需要对旧版本做一些降级处理，可以这样子做。


Page({
  data: {
    canIUse: wx.canIUse('button.open-type.contact')
  }
})
<button wx:if="{{canIUse}}" open-type="contact"> 客服消息 </button>
<contact-button wx:else></contact-button>
  7. 更多：

 

posted @ 2017-12-19 14:07  徐锅  阅读(485)  评论(0)  编辑  收藏  举报