2018-0402

大连微信小程序制作超简单!想自己动手开发朝

2018年,大连微信小程序制作已经进入热潮,青鸟传媒会一步步的引导您并实现一个简单的微信小程序搭建,并可以在微信上体验该小程序的实际效果。
 
首先,得先有一个小程序帐号,登录微信公众平台,选择微信小程序并前往注册,根据提示完成小程序的注册。
 
大连微信小程序制作超简单!想自己动手开发朝这看!
 
完成注册后,登录到小程序后台,开始开发前的准备工作。
 
首先,需要先获得小程序ID,设置-开发设置-appID
 
大连微信小程序制作超简单!想自己动手开发朝这看!
 
下载开发工具,小程序首页-开发工具- 普通小程序开发者工具-工具-微信开发者工具,然后根据自己的电脑系统选择相应的版本,然后下载并安装。
 
大连微信小程序制作超简单!想自己动手开发朝这看!
 
新建项目
 
登录下载安装好的开发者工具,新建一个项目目录并选择,然后填写入小程序ID并登录
 
大连微信小程序制作超简单!想自己动手开发朝这看!
 
登录后,我们来看一下主界面
 
整个开发工具基本分为三块:
 
上方行:table-item 每个按钮代表一个页
 
左侧框:webview 你的页面在这里实时展示
 
右侧框:chrome调试工具,暂且这样叫吧,因为确实是使用了charome的调试工具, 在这里可以调试页面的样式,js,网络检测,输入输出等等。
 
大连微信小程序制作超简单!想自己动手开发朝这看!
 
编写示例小代码
 
创建小程序实例
 
点击开发者工具导航的“编辑器”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。
 
下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。
 
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档。
 
//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.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解。
 
{
 
"pages":[
 
"pages/index/index",
 
"pages/logs/logs"
 
],
 
"window":{
 
"backgroundTextStyle":"light",
 
"navigationBarBackgroundColor": "#fff",
 
"navigationBarTitleText": "WeChat",
 
"navigationBarTextStyle":"black"
 
}
 
}
 
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
 
/**app.wxss**/
 
.container {
 
height: 100%;
 
display: flex;
 
flex-direction: column;
 
align-items: center;
 
justify-content: space-between;
 
padding: 200rpx 0;
 
box-sizing: border-box;
 
}
 
创建页面
 
在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
 
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
 
index.wxml 是页面的结构文件:
 
<!--index.wxml-->
 
<viewclass="container">
 
<viewbindtap="bindViewTap"class="userinfo">
 
<imageclass="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"></image><textclass="userinfo-nickname">{{userInfo.nickName}}</text>
 
</view>
 
<viewclass="usermotto">
 
<textclass="user-motto">{{motto}}</text>
 
</view>
 
</view>
 
index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
 
//index.js
 
//获取应用实例
 
var app = getApp()
 
Page({
 
data: {
 
motto: 'Hello World',
 
userInfo: {}
 
},
 
//事件处理函数
 
bindViewTap: function() {
 
wx.navigateTo({
 
url: '../logs/logs'
 
})
 
},
 
onLoad: function() {
 
console.log('onLoad')
 
var that = this
 
//调用应用实例的方法获取全局数据
 
app.getUserInfo(function(userInfo){
 
//更新数据
 
that.setData({
 
userInfo:userInfo
 
})
 
})
 
}
 
})
 
index.wxss 是页面的样式表:
 
/**index.wxss**/
 
.userinfo {
 
display: flex;
 
flex-direction: column;
 
align-items: center;
 
}
 
.userinfo-avatar {
 
width: 128rpx;
 
height: 128rpx;
 
margin: 20rpx;
 
border-radius: 50%;
 
}
 
.userinfo-nickname {
 
color: #aaa;
 
}
 
.usermotto {
 
margin-top: 200px;
 
}
 
页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
 
index.json 是页面的配置文件:
 
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
 
logs 的页面结构
 
<!--logs.wxml-->
 
<viewclass="container log-list">
 
<blockwx:for="{{logs}}"wx:for-item="log">
 
<textclass="log-item">{{index + 1}}. {{log}}</text>
 
</block>
 
</view>
 
logs 页面使用 控制标签来组织代码,在 上使用 wx:for 绑定 logs 数据,并将 logs 数据循环展开节点。
 
//logs.js
 
var util = require('../../utils/util.js')
 
Page({
 
data: {
 
logs: []
 
},
 
onLoad: function() {
 
this.setData({
 
logs: (wx.getStorageSync('logs') || []).map(function(log) {
 
return util.formatTime(newDate(log))
 
})
 
})
 
}
 
})
 
到此,一个简单的大连微信小程序开发就制作完毕了。