小程序与h5对比（注意事项）

1.框架介绍

app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.wxss

全局样式

app.js

全局js

小程序框架文档

2.组件介绍

1. view 相当于 div
2. text 相当于 span
3. image 相当于 img

小程序组件文档

3.事件介绍

bindtap 点击事件

小程序事件文档

4.模板语法

小程序的模板语法数据绑定使用 Mustache 语法（双大括号）将变量包起来

<view>{{ message }}</view>
<view id="item-{{id}}"></view>
<view wx:if="{{condition}}"></view>
<checkbox checked="{{false}}"></checkbox>
<view hidden="{{flag ? true : false}}">Hidden</view>
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
复制代码

5.rpx

==小程序不一定要全部使用rpx==，根据实际情况用px还是rpx，比如边距可以使用px统一。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

1. iPhone5 1rpx = 0.42px 1px = 2.34rpx
2. iPhone6 1rpx = 0.5px 1px = 2rpx
3. iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

小程序模板文档

6.接口调用

注意小程序开发必须使用==https==开发

utils/config.js

const base_url = "https://www.easy-mock.com/mock/5c2b2992f2332405dd956d1e/xxx";
export { base_url}
复制代码

utils/http-promise.js

import {base_url} from "./config.js";

class HTTP{
  request({ url, data = {}, header = {}, method = "GET", success = () => { }, fail = () => { } }){
    return new Promise((resolve,reject)=>{
      this._request(url, data, header, method, resolve, reject);
    })
  }
  _request(url, data, header, method, resolve, reject){
    wx.request({
      url: base_url + url,
      data: data,
      header: header,
      method: method,
      success: (res) => {
        let data = res.data;
        if (data.status != undefined && data.status == "ok") {
          resolve(data.data)
        } else {
          reject();
          wx.showModal({
            title: '错误信息',
            content: '错误信息',
            success(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }

      },
      fail: (err) => {
        reject();
        wx.showToast({
          title: '接口出错了',
          icon: 'none',
          duration: 30000
        })
      }
    })
  }
} 

export {HTTP}
复制代码

调用

import {HTTP} from "../../utils/http-promise.js";

http.request({
  url:"/getLessons"
}).then(data=>{
  this.setData({
    lesson:data
  })
})
复制代码

7. 组件开发

调用组件的时候，要写组件地址

index.json

"usingComponents": {
    "com-cmp": "/components/com/index"
}
复制代码

index.wxml

<com-cmp item="{{item}}"></com-cmp>//传入对应的属性数据
复制代码

components/com/index(组件)

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,//类型判断
      value: {}//默认为空
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})
复制代码

转载于:https://juejin.im/post/5c42abd6f265da61273da700