微信小程序开发入门
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：设置缓存
wx.getUserInfo: 获取用户信息
5
{
"pages":[
"pages/index/index", "pages/logs/logs"
], "window":{
"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black"
}
}6#
app.wxss 是整个小程序的公共样式表。
其中：
apx 是尺寸单位，可根据屏幕宽度自适应大小。与之对应的有rem：规定屏幕宽度为20rem；1rem = (750/20)rpx 。
.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 中也是支持的。
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>8index.js 文件其中：
getApp() 获取应用实例Page ： 声明页面。data: 定义数据bindViewTap ：为在view中绑定的是tap事件定义操作方法。wx.navigateTo ：导航到响应页面。onLoad ： 定义页面加载时的事件。在这里使用了在全局 app.js 中定义的回调函数，将data中的数据更新，由于双向的绑定，页面中的 userInfo 实例也会更新，显示出您的头像和昵称。
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '欢迎大家！', userInfo: {}
}, //事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}, onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})9版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
{
"pages":[
"pages/index/index", "pages/logs/logs"
], "window":{
"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black"
}
}6#
app.wxss 是整个小程序的公共样式表。
其中：
apx 是尺寸单位，可根据屏幕宽度自适应大小。与之对应的有rem：规定屏幕宽度为20rem；1rem = (750/20)rpx 。
.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 中也是支持的。
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>8index.js 文件其中：
getApp() 获取应用实例Page ： 声明页面。data: 定义数据bindViewTap ：为在view中绑定的是tap事件定义操作方法。wx.navigateTo ：导航到响应页面。onLoad ： 定义页面加载时的事件。在这里使用了在全局 app.js 中定义的回调函数，将data中的数据更新，由于双向的绑定，页面中的 userInfo 实例也会更新，显示出您的头像和昵称。
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '欢迎大家！', userInfo: {}
}, //事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}, onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})