小程序api 部分

目录结构

Paste_Image.png

每个小程序都有一个整体的 app 和多个页面 page；
app 部分的结构

app.js;     //逻辑文件
app.json;  //小程序的配置文件
app.wxss; // 小程序的全局样式表

每个 page 的结构

page.js;    // 页面逻辑
page.wxml;  //页面结构
page.wxss;  //页面样式表
page.json;  //页面配置

特别注意

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

逻辑层 *.js

逻辑层是js编写的。
注意点

• 增加App()和Page()方法，进行注册程序和页面。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
• 每个页面有独立的作用域，并提供模块化能力。
• js的执行环境不是浏览器所以无法使用web中的对象，如： window、document等。
• 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。

app.js 模板

App({ 
    onLaunch: function() { // Do something initial when launch. },   
    onShow: function() { // Do something when show. }, 
    onHide: function() { // Do something when hide. }, 
    globalData: 'I am global data'}),
    apiUrl: 'xxx.xx.com'//可以定义全局变量
});

page.js 模板

//获取应用实例
var app = getApp()
Page({ 
    data: { text: "This is page data." }, 
    onLoad: function(options) { // Do some initialize when page load. }, 
    onReady: function() { // Do something when page ready. }, 
    onShow: function() { // Do something when page show. }, 
    onHide: function() { // Do something when page hide. }, 
    onUnload: function() { // Do something when page close. }, 
    onPullDownRefresh: function() { // Do something when pull down. }, 
    onReachBottom: function() { // Do something when page reach bottom. }, 
    // Event handler. 
    viewTap: function() { 
      this.setData({ text: 'Set some data for updating view.' });
      // 可以直接获取app上的全局变量函数等等
      app.apiUrl; 
     },   
    customData: {
       hi: 'MINA' 
    }
   })

视图层

WXML 小程序的页面结构

数据绑定

双大括号绑定{{}}

 
  {{ message }} 
 
  
 
  
 
 1 
 2 
 3 

列表渲染

  
   {{index}}: {{item.message}}

  {{idx}}: {{itemName.message}}

WXSS 小程序的样式表

小程序自己的样式表，支持大部分标准css 支持flex
小程序的响应式布局，

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
  选择器
• .class
• #id
• element
• element, element
• ::after
• ::before

组件

这里的组件相当于html中的标签

• 视图容器
  • view （相当于html 中的div）
  • scroll-view
  • swiper (小程序的轮播组件)
• 基础内容
  • icon
  • text
  • progress
• 表单组件
  • button
  • checkbox
  • form
  • input
  • label
  • picker
  • radio
  • slider
  • switch
  • textarea
• 导航

• navigator

• 媒体组件
  • audio
  • image (注意image有个默认的宽320px;高240px)
  • video
• 地图
  • map
• 画布
  • canvas