技术向：零基础，如何开发一个极具吸引力的微信小程序博客

阿麦说应用amaishuo

导读

零基础？不懂代码？

阿麦君手把手教你建简易版小程序博客~

时间提示

正文一共：1951字 ，21图

预计阅读时间：4分钟

微信在过去的几年发展中，已经拥有了10亿的用户，而且其月活一直稳居第一，其推出的微信公众号，订阅号也在不断发展，而且已经形成了自己的一套运营模式和开发模式，但是对于新出现的微信小程序而言又该如何去开发呢？

现在微信小程序正是大火的时候，很多人都预测公众号的时代已经过去，而小程序、付费订阅、直播、多平台发力这些才是未来嘛。那么，企业还要不要做一款小程序呢？企业又该如何开发微信小程序使其极具吸引力呢？

很多企业主都想要自己先体验一番小程序开发，奈何不会编程，看不懂代码。所以阿麦君准备为这些想要初步了解小程序开发的人，带你们入个门~

1

阿麦君手把手带你入门

阿麦君今天就以一个较为基础的微信小程序博客的创建作为案例，带大家了解下开发微信小程序的入门步骤。

打开微信web开发者，

1.新建项目

选择无AppID模式

进入项目初始化

2.文件讲解

小程序里面一个文件夹就是一个页面，包含四个文件。

.js结尾的是脚本文件。

.wxml是页面标签文件，即类似我们原先使用的html标签一样。

.wxss是样式文件，即是我们原先使用的css3.

3.开始开发

打开文件app.json，page对象表示每添加一个页面，就需要往里面加一条路由，名称必须和文件夹和文件一致。

4.路由导航

由于小程序默认首页是index，在首页触发事件后我们需要进行处理。

编辑blog文件夹下面blog.wxml,里面添加“这个是我个人博客”，编辑index文件里面的index.js文件，添加路由，完成后保存文件（一定要保存），点击开发工具左侧菜单栏“编译”，然后就进入页面。

进入主页后，点击下，触发我们刚刚绑定的函数，跳转到我们的页面。

进入主页后，点击下，触发我们刚刚绑定的函数，跳转到我们的页面。

5.添加素材

添加一些图片素材（网上找的），复制到项目的根目录下面，和pages目录同级

6.查看微信文档介绍

7.编辑blog.js

打开blog文件夹，编辑blog.js，page函数里面添加对象，data对象表示数据，即和后台交互的数据都在这里面存储和展示，onLoad,onReady等函数是微信在页面加载时默认存在的函数，我们可以重写，实现我们自己的逻辑。

8.点击编译

点击编译查看对应的效果，及函数加载顺序,onLoad、onShow 、onReady的加载顺序

9.网络请求

10.编辑blog.js

编辑blog.js，在onLoad函数里面发起网络请求，接口地址是我测试用的地址，会返回对应的数据列表，注意的地方是this指向问题，因为是在回调函数里面获取数据的，然后需要放到data对象里面，所以需要提前保存this对象的地址

现在进入页面就可看到控制台打印接收到的数据了（数据请求也可以这样发送）

[javascript]view plaincopy

//发起网络请求

wx.request({

url: app.globalData.blog_url+'/article/findHotArticles.action',

data:{

size:20

},

success:function(res) {

console.log(res.data);

//把获取到的结果放到数据层

that.setData({

list:res.data

})

}

})

具体阿麦君也为您截了张图：

11.展示数据

现在就是展示数据的时候了，打开微信微信官方文档，主要使用的是view标签，详情参考文档

12.展示层代码

展示层代码，使用 遍历文章对象，{{}} 取的是data数据层里面的数据，

绑定的下拉函数（不做处理）

13.处理样式

处理样式，view标签可以使用css3的样式，并且微信本身也提供一些计算尺寸的方法，也支持样式选择器，类选择器，id选择器，直接看代码，编辑我们的blog.wxss

14.保存

现在就可以保存，然后点击左侧的编译，就完成了列表展示

基本上，一个简易版本的微信小程序博客就做好啦~

不知道各位能否对小程序开发的流程有了个大致的了解呢？

- END -