微信小程序初体验

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/54140680

微信小程序初体验

小程序是微信版APP面向产品和服务,小程序不支持关注和严格的消息推送。小程序基于MINA框架开发,运行环境是JsCore。小程序是微信内的云端应用,无需下载安装,通过WebSocket双向通信,保证无需刷新即时通信,实现本地缓存,只需要对服务器请求交互数据,所以更接近原生APP的流畅程度。

1.小程序开发特殊性的总结

(1).邮箱注册要求没有注册过服务号、订阅号和企业号的邮箱
(2).个人主体不能注册微信小程序(个人只能乱写一个企业信息玩玩小程序)
(3).小程序前期将主要通过扫描二维码进入或者搜索进入，它在微信中不会设置入口，如果之前没有运行过小程序就找不到它
(4).张小龙给出了小程序上线的准确时间：2017年1月9日(最新消息:点击打开链接)
(5).小程序开发使用了MINA框架,是一套封闭的技术体系
(6).WXML里面只能使用MINA框架提供的组件标签，不能使用HTML的标签
(7).WXSS可以使用CSS的大部分属性,也可以使用LESS或者SASS来写，只要选择器满足框架的要求即可
(8).小程序开发Class只能使用ES6的形式定义静态属性和实例属性,不能使用ES7的,不过babel已经支持了,所以React可以使用某些ES7的属性
(9).小程序支持ES6的大部分特性,可以直接使用,不需要转码
(10).微信小程序不能链接到外部的页面,屏蔽了a标签

2.小程序和公众号的区别
(1).定位不同
公众号面向营销与信息的传递,借助H5能够实现简单的交互以及简单的服务,而小程序面向产品和服务,两者的定位不同,小程序不支持关注和严格的消息推送。

(2).实现技术和用户体验不同
公众号基于H5开发,运行环境是微信内置浏览器,而小程序基于MINA框架开发,运行环境是JsCore。微信小程序能够通过微信APP获取更多的系统权限,借助微信与系统间接交互,使得小程序能够拥有更接近原生APP的体验。
小程序是微信内的云端应用,无需下载安装,通过WebSocket双向通信,保证无需刷新即时通信,实现本地缓存,只需要对服务器请求交互数据,所以更接近原生APP的流畅程度。

3.小程序的文件结构
(1)小程序的公共配置由三个文件组成,分别是js、json和wxss结尾的文件,公共配置文件必须放到项目的根目录下,公共配置文件各自的作用如下图

==============项目文件结构==============

(2)小程序的每个Page都由四个文件组成,分别是js、json、wxss和wxml结尾的文件,每个Page的文件的文件名字都必须一样并且放到相同的路径下面,每个Page文件各自的作用如下图
==============页面文件结构==============


4.配置文件app.json和page.json的介绍
(1)工程配置文件
可以使用app.json文件来对微信小程序进行全局配置,配置页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。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": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

(2)页面配置文件
可以使用page.json文件来对微信小程序单个页面的窗口表现进行配置,页面配置只需要设置window配置项的内容即可,页面配置会覆盖全局配置的相同配置项
==============页面配置项列表==============

以下是页面配置文件的简单配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

5.逻辑文件app.js和page.js的介绍
(1)App()函数用来注册一个小程序,接收一个object参数,指定小程序的生命周期函数和公共逻辑等。小程序的生命周期和公共方法如下
==============公共逻辑==============

以下是app.js逻辑文件的简单写法

App({
  onLaunch: function() {
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

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

(2)Page()函数用来注册一个页面,接受一个object参数,指定小程序页面的生命周期函数、初始数据和事件处理函数等。
==============页面逻辑==============

以下是page.js逻辑文件的简单写法

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.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

6.视图(View)文件WXML和WXSS的介绍
WXML是MINA框架设计的一套标签语言,结合基础组件、事件系统可以构建出页面的结构。WXML具有数据绑定、条件渲染、列表渲染、模板、事件、引用的能力。
WXSS是一套样式语言,用于描述WXML的组件样式,用于决定WXML的组件怎么显示,WXML具有CSS大部分特性,扩充了尺寸单位、样式导入等。
尺寸单位
rpx尺寸可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx,如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
==============尺寸==============

注意:开发小程序设计师可以使用iphone6作为视觉稿的标准
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径

@import "common.wxss";

7.小程序开发的参考资料
微信小程序官方文档1(推荐)点击打开链接

官微信小程序官方文档2点击打开链接

微信小程序官方文档3点击打开链接

微信小程序官方开发工具点击打开链接

微信小程序开发工具大全点击打开链接

微信小程序各种DEMO点击打开链接

微信小程序开发DEMO和教程点击打开链接

微信小程序社区点击打开链接

腾讯云微信小程序解决方案点击打开链接

微信小程序开发文档没有告诉你的点击打开链接

微信小程序和公众号的区别点击打开链接

微信小程序初体验

博客地址：http://blog.csdn.net/pcaxb/article/details/54140680