官网文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
一、简介
按原生微信小程序的开发文档来学习， 主要内容是框架、组件、API三个部分，其实还有开发工具的使用，既然刚入门，我们就一个一个慢慢来学习。
之前了解到一个小程序框架wepy，比较火，很多人都用它，我这边认为，框架是对底层的封装，既然是这样，如果不系统地学习原生的小程序开发，使用其他框架直接开发会有一些难度，或者有些东西会理解不了。
二、内容学习
页面：pages/test/test
1、视图层和逻辑层的响应式数据绑定
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>pages/test/test.js
// This is our data.
var helloData = {
name: 'WeChat'
}
Page({
/**
* 页面的初始数据
*/
data: helloData,
changeName: function (e) {
// sent data change to view
this.setData({
name: 'MINA'
});
}
})页面绑定的数据变了，页面显示内容跟着变化。
2、文件结构
很简单，新建小程序项目时的demo，就是这样的结构：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
3、配置
小程序的配置在app.json中修改，对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"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
}4、逻辑层（App Service）
小程序开发框架的逻辑层由 JavaScript 编写。
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
官网简介：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/
4.1 注册程序
主要是针对小程序app的全局回调函数 onLaunch/onShow/onHide/onError ，就是小程序在发生状态变化时，会回调固定的函数来处理一些自定义逻辑。
4.2 注册页面
注册页面和注册程序有些类似，但这个是针对小程序是每个页面的回调函数，这些回调事件在每个页面状态改变时都会调用一次属性页面本身的注册事件。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html 这里面也有很多的回调事件，
比如：onShareAppMessage（用户转发）
只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容
Page({
onShareAppMessage: function () {
return {
title: '自定义转发标题',
path: '/pages/test/test?shareid=007'
}
}
})4.3 模块化
文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。
// app.js
App({
globalData: 1
})
// a.js
var app = getApp()
app.globalData++可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口，更建议使用 module.exports
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye
//test.js
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})4.4 api
小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
比如，获取用户位置：
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})显示提示框：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})页面跳转：
//test2.js
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query) //获取到参数
}
})详细介绍请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/
好了，今天就学习小程序框架的数据绑定、项目结构、配置、逻辑层相关知识，都只示例其中一种，比如api有很多很多，不可能一一学习，实际开发中用到再去查api文档就好了，学习的是一种使用方法或者是一种思想，后面具体的每一种功能的使用可以触类旁通。
后面再学习框架中的视图、自定义组件等知识~
评论列表: