github精选：微信小程序入门简要教程

作者：模板之家 2018-1-31 09:55 10110人关注

文件类型 .js JavaScript文件 .json 配置文件，定义窗口颜色、字体颜色等 .wxml Weixin Markdown language，类似HTML .wxss Weixin Style Sheets，类似CSS 入口文件小程序根目录一般有三个文件： app.js 、

文件类型

.js ———— JavaScript文件
.json —— 配置文件，定义窗口颜色、字体颜色等
.wxml —— Weixin Markdown language，类似HTML
.wxss —— Weixin Style Sheets，类似CSS

入口文件

小程序根目录一般有三个文件：app.js、app.json、app.wxss

app.json

必须要有这个文件！！否则IDE会报错！这是小程序的配置入口，可对整个小程序进行全局配置，包括页面路径、窗体表现、设置网络超时时间，设置多tab等。

			
				
						
							// app.json
{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    }
}
						
					

			
		

app.js

必须要有这个文件！！否则IDE会报错！可用来声明全局变量，监听并处理小程序生命周期函数。

			
				
						
							//app.js
App({
    onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    },
    getUserInfo:function(cb){
        var that = this
        if(this.globalData.userInfo){
          typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
            //调用登录接口
            wx.login({
                success: function () {
                  wx.getUserInfo({
                    success: function (res) {
                      that.globalData.userInfo = res.userInfo
                      typeof cb == "function" && cb(that.globalData.userInfo)
                    }
                  })
                }
            })
        }
    },
    globalData:{
        userInfo: null
    }
})
						
					

			
		

app.wxss
- 不是必须的，用于定义全局样式。

运行机制

微信小程序背后运行的是一个MINA框架。这里做简单的描述其运行机制。

在微信开发工具的console中输入openVendor()，会打开文件夹，其中包含以下四个文件：wcc、wcsc、WAService.js、WAWebview.js

wcc 将wxml转化成一个generateFunc，执行后可得到一个virtual_dom。
wcsc 将wxss转化成css
WAService.js 提供service层大部分功能，包含WeixinJSBridge、Reporter、wx、appServiceEngine等。
WAWebview.js 提供view层大部分功能，包含WeixinJSBridge、Reporter、wx、esparser等。

对这块感兴趣的童鞋，我找了一些相关文章：

微信小程序架构分析 (上)
微信小程序架构分析 (中)
微信小程序架构分析 (下)

逻辑层

注册程序
- App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
- object参数包含：onLaunch onShow onHide
- getApp() 全局函数，可获取到小程序实例。
注册页面
- Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
- object参数包含：data onLoad onReady onShow onHide onUnload onPullDownRefreshonReachBottom
- 生命周期：
- Page.prototype.setData()
  - setData() 用于将数据从逻辑层发送到视图层，并更改对应 this.data 的值
  - 参数格式，接受一个对象，以key和value的形式表示将this.data中的key对应的值改成value，其中key可以非常灵活，如 array[2].message, a.b.c。
模块化
- 目前不支持node_modules，可以通过require(path)自行引入，但要注意不能引入使用了window和document对象的模块。

视图层

WXML (Weixin Markup Language) 这部分比较简单，可直接看官方文档。
WXSS (Weixin Style Sheets) 官方文档
- 注意事项：
  
  background-image 在模拟器中可使用相对路径中的图片，但在真机中必须使用外链图片或者base64图片

组件库

在小程序中我们只能使用官方推出的标签组件，目前大致分为视图容器、基础内容、表单组件、操作反馈、导航、媒体组件、地图、画布。

这里放点干货：

view 类似div一样的盒模型，不能识别 \n 。
navigator 导航，支持相对路径和绝对路径，最多存在5级页面。小程序中不能跳转到外部url，默认是打开新页面，如果要重定向需添加 redirect。
image 与img最大区别在于，小程序是通过background-image来实现的，有默认高宽320*240，不支持auto。此外提供了3中缩放模式和9中裁剪模式。详情点击官方文档