小程序入门（一）
前言：
最近有需求，要用到小程序，在官网注册了一个个人小程序应用。下载了开发者工具。
打开开发者工具后，新建一个普通的微信小程序，不要选择默认的云程序，代码会增加很多，不容易读代码。我们入门，还是选择普通小程序应用，然后输入你申请的小程序appid点击确定后就会新建一个小程序。
读代码：
目录结构：
目录结构很简单：pages文件夹，utils文件夹，然后就是app相关文件。
pages文件夹：包含了app的所有页面。
utils文件夹：包含一些小程序默认提供的方法。
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
project.config.json：是针对个性化的一些设置，方便移植自己的项目，这里可以暂不关注。
程序启动流程：
当打开小程序后，首先会进入app.js的onLaunch方法。这里要说明下，一个小程序，只能有一个app实例，这里所说的实例是指下图中的的代码：
这段代码一般默认卸载app.js里，我们不要在别的js文件里定义噢。
说明一下App这个实例中的几个方法如下：
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})注释已经说的很明白了，就是在小程序执行不同时期的操作时，会调用上述方法。
我们接着前边说，当小程序启动后，后先调用App实例的onLanuch等方法，接着根据app.json的配置，启动首页（一般是pages里的第一行）。如下图就是启动第一行的index页。
当打开首页index后，会调用index.js中的onLoad()方法。这里要说明下，每个页面的js文件，都需要实例Page(),Page中包含了处理该页面的方法。默认方法如下：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
每个方法的含义参见注释。
页面构成：
当你打算自己画一个页面，添加一些逻辑，都需要包含哪些文件呢？参考下图：
wxml文件：类似android中的布局页面，类似web中的html页面，就是画布布局的。
js文件：类似web中的js文件，就是针对布局写脚本的。
wxss文件：类似web中的css文件，就是针对布局页面写样式的。
json文件：用于配置页面路径、界面表现、网络超时时间、底部 tab 等
HelloWorld:
当你新建一个普通应用小程序时，系统已经帮你创建了一个helloworld程序了。在这里我们自己重新写一个，对程序有个最简单的理解。
首先我们在pages文件夹右键选择新建目录helloworld,然后该文件夹右键，新建page命名为helloworld，如下图：
文件列表如下：
接着我们在helloworld.wxml中写布局文件，
<text>{{text}}</text>这里边的text,我们在helloworld.js中赋值。如下：
最后，我们在app.json中，把新增的这个helloworld页面放在第一行，这样才会默认加载为首页。如下：
这样，一个最简单的helloworld程序就创建完成了。
写一个列表：
知识基于helloworld，我们新建一个page--listdemo。
我们首先修改listdemo.wxml页面，内容如下：
<!--pages/listdemo/listdemo.wxml-->
<view wx:for="{{list}}">
<text>{{item.listName}}</text>
</view>
view：表示一个视图区域。
wx:for:表示要循环遍历一个list。
list:在listdemo.js中，要赋值的数据。
item：表示list中的一个item。
listName:在listdemo.js中，要赋值的数据。是list数组中其中一条数据的一个字段。
上面的代码表示，遍历list数组， <text>{{item.listName}}</text>就处于循环范围内。
我们再看下listdemo.js中的代码。
// pages/listdemo/listdemo.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{ listName: "listdemo1" },
{ listName: "listdemo2" },
{ listName: "listdemo3" },
{ listName: "listdemo4" },
]
},我们只需要初是list值即可。
最后看下运行效果：
这样，一个最简单的list列表就完成了。我们可以把listdemo.js中的数据，替换成从数据库或api接口中获取。
网络获取数据：
首先，我们需要在公众平台的小程序设置中，配置安全域名，具体操作参见域名配置及注意事项。
如果临时测试的话，我们可以不用设置，在开发者工具中，点击右上角的详情，然后在下边将下图的勾勾上。
这样就可以临时使用该域名了。
要从网络获取数据，先找个接口，我们这里选用免费的接口：http://api.apiopen.top/singlePoetry
笔者亲测可用，每次获取数据是随机的；内容如下：
{"code":200,"message":"成功!","result":{"author":"叶梦得","origin":"八声甘州·寿阳楼八公山作","category":"古诗文-人生-时光","content":"想乌衣年少，芝兰秀发，戈戟云横。"}}根据这个接口，我们写个布局，如下：
<!--pages/networkdemo/networkdemo.wxml-->
<text>作者：{{author}}\n</text>
<text>出处：{{origin}}\n</text>
<text>目录：{{category}}\n</text>
<text>内容：{{content}}</text>然后我们在networkdemo.js文件中将这几个字段赋值。具体代码如下：
// pages/networkdemo/networkdemo.js
Page({
/**
* 页面的初始数据
*/
data: {
author:"",
origin:"",
category:"",
content:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var networkPage=this
wx.request({
url: 'http://api.apiopen.top/singlePoetry',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function(res) {
if(res.data.code==200){
var list=res.data.result
console.log(list)
console.log(list.author)
console.log(list.origin)
console.log(list.category)
console.log(list.content)
networkPage.setData({
author: list.author,
origin: list.origin,
category: list.category,
content: list.content,
})
}
},
fail: function(res) {},
complete: function(res) {},
})
},
})大致流程如下，首先在data中初始化这几个字段。
然后在onLoad方法中获取接口数据。
如果获取成功的话，调用setData方法更新这几个数据。
最后效果如下：
结尾：
以上就是微信小程序的一些基础知识，更多资料还需要参考官方文档。