微信小程序开发难不难？怎么开发微信小程序？
微信小程序面世以来受到的关注颇多，所以开发微信小程序的人也比比皆是，但是对于新手来说微信小程序开发难不难呢?其实只要掌握具体步骤就好啦!一起来看看!
准备工作
我们先确定想要开发一款什么样的小程序，首先要符合「小」，因为我们这次是要体验小程序的开发，所以尽量不要弄得太复杂;其次是「快」，小程序里需要的数据啊、资源啊，最好是现成就有的，自己写个API什么的这就太耗时了，就不叫快速上手了。
所以呢，如果能调用现成的API那是极好的，经过一番挑选，我选择了聚合数据的历史上的今天这个API，调用这个API获取数据，我们只要做2个页面就可以完全展示出来了，又「小」又「快」哈XD
API一枚: 「历史上的今天」
微信小程序开发者工具
注: API需要注册之后获得KEY才能使用，具体请查看聚合数据官方文档，这里默认各位已经注册并拥有相应API所需的KEY
工程结构
微信开发者工具的安装和使用在这里就不多作介绍了，有疑问的话可以看微信官方的简易教程
先创建一个工程，依次点击「添加项目」--「无AppID」，然后填好「项目名称」并选择「项目目录」，点击「添加项目」
添加项目
然后我们来清理一下默认工程的小程序目录结构，删除以下目录和文件
pages/logs/
pages/index/index.wxss
创建以下目录和文件
pages/detail/ pages/detail/detail.js
pages/detail/detail.wxml
pages/templates/ pages/templates/item.wxml
res/
现在你看到的目录结构应该是这样子的
.
├── app.js ├── app.json ├── app.wxss ├── pages │ ├── detail │ │ ├── detail.js │ │ └── detail.wxml │ ├── index │ │ ├── index.js │ │ └── index.wxml │ └── templates │ └── item.wxml ├── res └── utils └── util.js
这就是我们工程目录的最终结构了，后面还会添加资源进去，但是整体结构还是这样不会改变的
修改配置
微信小程序是通过修改app.json文件改变全局配置的，具体的可配置项请各位自行查阅小程序文档的配置一节
打开app.json，修改成
{
"pages":[ "pages/index/index", "pages/detail/detail" ],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"navigationBarTitleText": "历史今日",
"navigationBarTextStyle":"white" },
"debug": true }
我们这里修改了导航栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText)，为了方便查看调试信息，我还开启了debug模式
全局配置以及搞定啦，接下来正式开始编写微信小程序码
首页布局
前面已经说了我们要做的是「历史上的今天」这样的一个小程序，所以同一个日期会有很多条目，最常见的布局就是做成列表
列表里会有很多的条目，数量是不确定的，所以我们不能在页面里写死了布局，这时候就要用到模板(template)了，我们可以在模板中定义代码片段，然后在不同的地方调用
我们来定义一个模板，打开pages/templates/item.wxml，添加代码
{{item.date}} {{item.title}}
注: 模板的使用细节请参考官方文档模板一节
接下来打开pages/index/index.wxml删掉里面的内容，我们要在这里编写列表页，这里会使用到我们上面定义的模板
没有更多内容了 内容加载中... Loading...
可以注意到第一行使用了import将模板引入到页面中，然后再使用is属*，声明需要使用的模板，用data属*传入数据供模板使用
注: 模板拥有自己的作用域，只能使用data传入的数据
为了测试和查看小程序页面布局效果，我们打开pages/index/index.js删除里面的代码，然后添加以下代码手动创建数据传入给页面渲染
Page({
data: {
hidden: true,
events: [
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" },
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" },
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" },
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" },
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" },
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天" }
]
}
})
保存后点击开发工具左侧的编译，即可查看到效果
首页布局效果
注: 布局会用到图标字体，导入到res/下，样式则写在app.wxss全局样式表中，图标字体文件和样式请从源码中获取，这篇教程不作样式的说明
详细页面
首页的布局已经完成了，暂时放下首页列表，接下来开始编写详细内容的页面
打开pages/detail/detail.wxml，添加内容如下
{{detail.title}} {{detail.content}} {{item.pic_title}} Loading...
搞定，这个页面就这么简单就OK了，现在我们打开pages/detail/detail.js手动添加数据到这个页面中查看效果
Page({
data:{
hidden: true,
detail: {
title: "历史上的今天",
content: "历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天",
picUrl: [
{
url: "sjbz.fd.zol-img/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
pic_title: "这是图片标题" }
]
}
}
})
详细页面效果
填充数据
现在页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始之前我们先清理一下无用的代码
打开app.js删掉无用的函数和属*
App({
})
以上这步是额外步骤，并不影响我们接下来要做的事情
打开utils/util.js并清空里面的代码，添加如下内容
// 查询事件列表的Base URL const API_URL_L = "v.juhe/todayOnhistory/queryEvent.php" // 查询详细信息的Base URL const API_URL_D = "v.juhe/todayOnhistory/queryDetail.php" // 申请API获得的KEY const API_KEY = "YOUR API KEY" // 获取事件列表 function fetchEvents(today) { var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_L,
data: {
key: API_KEY,
date: today
},
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
})
}) return promise
} function getEvents() { var tmpDate = new Date() var today = tmpDate.getMonth() + 1 today = today + '/' + tmpDate.getDate() return fetchEvents(today)
.then(function(res) { // console.log(res.data.result) return res.data.result
})
.catch(function(err) { console.log(err) return []
})
} // 获取详细信息 function fetchDetail(e_id) { var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_D,
data: {
key: API_KEY,
e_id: e_id
},
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
})
}) return promise
} function getDetail(e_id) { return fetchDetail(e_id)
.then(function(res) { // console.log(res.data.result) return res.data.result
})
.catch(function(err) { console.log(err) return []
})
} module.exports = {
getEvents: getEvents,
getDetail: getDetail
}
注: 请将API_KEY的值替换为你申请到的KEY
我们要利用API获取的数据有两种，一是「事件列表」，另一种是事件对应的「详细信息」，上面使用到了ES6原生提供的Promise对象，具体请参考阮一峰的《JavaScript 标准参考教程(alpha)》中「Promise对象」一节
最后还用到了module.exports对外暴露两个函数，使外部可以调用
我们继续打开pages/index/index.js文件，修改成这样
const util = require('../../utils/util.js')
Page({
data: {
hidden: false,
events: []
},
onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 var self = this
util.getEvents().then(function(data) { self.setData({
hidden: true,
events: data
})
})
}
})
然后打开pages/detail/detail.js，修改如下
const util = require('../../utils/util.js')
Page({
data:{
hidden: false,
detail: {}
},
onLoad:function(param){ // 页面初始化 param为页面跳转所带来的参数 var self = this util.getDetail(param.id).then(function(result){
self.setData({
detail: result[0]
})
})
},
onReady:function(){ // 页面渲染完成 wx.setNavigationBarTitle({
title: this.data.detail.title
}) this.setData({
hidden: true })
}
})
这里我们调用了wx.setNavigationBarTitle方法动态设置导航栏的标题内容，需要注意的是必须在页面渲染完成之后，即onReady之后才能调用该方法修改导航栏标题
有了小程序开发者工具，微信小程序开发难不难就不是问题了，你会觉得开发小程序真的不难!对照以上流程进行开发吧，祝大家获得成功!更多相关资料请关注微信小程序素材网。
开发微信小程序难吗?微信小程序开发的技术难度
微信小程序下拉框开发代码
微信小程序接收推送怎么开发
上一篇：简单的入门级微信小程序编程基础
下一篇：以汉堡王为例微信扫码开票怎么搞?