微信小程序开发入门
1
当你准备开发一个微信小程序的时候，你首先需要一个小程序的 APPId ，在微信公众号官网可以获得。（暂时只有官方邀请的才可以获得）。
2
你还需要准备微信开发者工具，官网同样有下载，下载安装即可，支持windows，linux，和MAC平台。
小程序使用的微信自己开发 MINA 框架,提供了视图层描述语言，WXML 和 WXSS 以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
3//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.getUserInfo({
withCredentials: false, success: function(res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
}, globalData: {
userInfo: null
}
})
4
上述代码中的一些 API 介绍：
App : 注册一个小程序
onLunch :程序加载时执行的方法
getStorageSync：以同步的方式获取本地缓存
setStorageSync：设置缓存
5{
"pages":[
"pages/index/index", "pages/logs/logs"
], "window":{
"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black"
}
}
6
小程序
的公共样式表。
@H_404_35@.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
7
全局文件就这些，然后我们看 index 文件中的内容有三部分内容，index.js,index.wxml,index.wxss,下面介绍它们的作用。index.wxml 文件这是一个展示页面，作用于html相同。可以看出，内容分块均采用 view 标签，这也很容易让人想到Android 中的布局，但其实只是更多的是 div 标签的另一个版本，在这里面有很多 MINA 自定义的属性，而且在我们在其中也看到了{{ }}样式的值操作，这也很容易让人联想到 angularJS 中的数据双向绑定，在 MINA 中也是支持的。
猜你在找的微信小程序相关文章
{
"pages":[
"pages/index/index", "pages/logs/logs"
], "window":{
"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black"
}
}
6
小程序
7
全局文件就这些，然后我们看 index 文件中的内容有三部分内容，index.js,index.wxml,index.wxss,下面介绍它们的作用。index.wxml 文件这是一个展示页面，作用于html相同。可以看出，内容分块均采用 view 标签，这也很容易让人想到Android 中的布局，但其实只是更多的是 div 标签的另一个版本，在这里面有很多 MINA 自定义的属性，而且在我们在其中也看到了{{ }}样式的值操作，这也很容易让人联想到 angularJS 中的数据双向绑定，在 MINA 中也是支持的。
猜你在找的微信小程序相关文章
