如果你有html页面开发经验，小程序应该不会有任何难度，看一下官方文档即可。
这篇文章主要写给零基础的跨行小伙伴，如何开始一步一步制作自己的小程序。
前两篇文章带着大家认识了一下小程序，咱们应该有了一定的理解。如果还没有阅读，请拉到文章末尾，先从（1）开始读起。
今天咱们直接模仿乔帮主的“小乔的读书笔记”小程序，做一个自己的小程序。如果申请了小程序的帐号，做完就可以提交上线，是不是有点小开心？
看下面的图片，是咱们要模仿的界面。
小乔的读书笔记（乔帮主的小程序）
咱们开始吧！
一、新建目录文件
1）新建一个目录，命名为resume，目录下建立page名称也是resume，见下面视频。会生成自动生成4个文件。
小程序开发-目录文件创建
2）在根目录新建image目录
创建目录、文件
二、代码编辑
resume.wxml
resume.wxss
resume.js
由于简书不能粘贴代码，请下载附件查看。
下载之后，可以覆盖或者把文件里的内容，复制到你的文件里。
三、代码讲解
resume.wxml 主要涉及这几个标签：
<view class="body"></view> 第2篇文章中有介绍，大部分布局都是用view实现。里面的class对应 resume.wxss 中定义的样式。
<image src="..."></image> 显示图片，src是图片地址
<button open-type='share'>按钮</button> 按钮，小程序里比较特殊的属性 open-type，可以看官方文档了解一下。
resume.wxss
.body{
padding:10rpx 100rpx;
}
这里的body，对应resume.wxml里<view class="body"></view>，用来定义显示的样式。
重点介绍几个css：
font-size:24rpx; 文字的字号
text-align: center; 居中对齐
color:#666666; 文字颜色（灰色）, RGB
width:200rpx; 宽度
height:68rpx; 高度
box-shadow: 0rpx 12rpx 10rpx 2rpx #F4B4CC; 这是按钮的漂亮投影
border-radius: 34rpx; 把方形的角显示成圆角，设置为宽高的1/2，就是个圆形
resume.js
文件是默认生成的，包含几个事件，onLoad、onShow、onPullDownRefresh等等，暂时咱们先不讲那么多，需要了解的继续看看官方文档。
这里咱们定义了一个方法
callphone: function() {
wx.makePhoneCall({
phoneNumber: '18510805389',
})
},
用来调用拨打电话功能
预览、上传
四、预览
如上图，点 预览 按钮，会显示 编译、上传，之后出现一个二维码，用自己的微信扫码，就可以在手机上预览真实的效果。
五、发布
还是看上面的图片，点 上传 按钮，上传到注册的小程序帐号的管理平台里。
上传
版本号 1.0.0、1.0.1、1.1.0、2.0.0 按这种格式写就可以；备注是可选项
六、发布
上传成功之后，到管理页面，提交小程序，审核通过之后，会给自己的微信帐号发送通知。
再次进入到小程序管理页面，开发管理，发布已经审核通过的小程序，就可以公开访问了。
扩展阅读：
网友评论