小程序官方文档-小程序版（小程序手机版）

小程序官方文档-小程序版（小程序手机版）

#一、前言

2016年11月初，微信公众平台发布公告，宣布微信小程序正式开放公测。允许开发者将产品提交至微信公众平台审核，但是暂时不支持发布。 作者本人是从事iOS 开发的，但从小程序出来到开放公测，一直都想去研究研究，奈何各种"因素"没有去试（上班有公司项目，下班就去夜跑，哈哈，反正就是借口）到 2016.12.11日，公司也有意做小程序开发，终于定下心来研究一番，在此分享一下。 学习首先肯定去看 官方文档 ，当然只看不行，起码敲一个Demo出来嘛，看着文档还比较详细，结构层级还是很清晰的，而且官方也有一个Demo做部分功能演示,扫码就行，既然功能不是很完善，那就自己写一个 完整的小程序版 的 小程序官方文档吧！也算是个人项目！当然，代码都是自己写的，没任何抄袭官方的Demo。 本来打算把功能完善了再开文章分享，但考虑到功能点比较多，遇到的坑肯定很多，而且作者也是新手，短时间内是不可能完成，所以先分享文章，方便记录 **开发小程序中遇到的各种问题 **，功能也能持续更新，经历两天时间，目前已经完成文档的目录搭建，看图：

#二、通过本文你能了解什么

1、本文会简单介绍一下小程序，有个大概了解，什么是小程序 2、可以大概知道小程序开发需要准备什么东西，并简单说明开发的流程 3、可以先知道小程序开发过程中有什么哪些要注意的问题（我在前面踩坑呢） 4、有个持续更新的Demo，并有对应的注释，看不懂代码，还看不懂文字么

#三、小程序

1、什么是小程序

其实小程序就是类似之前的服务号，公众号的存在，看下图，引用Allen Zhang 的话：“小程序是一种不需要-安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。”

2、小程序的影响

现在流量越来越来，手机网络也是越来越好，网页端现在确实越来越火了，原生移动端的小伙伴都开始不淡定了，我也是一直从事iOS 开发，说实话，我一点都不担心，没有为什么的，出来就学嘛！编程的东西，原理思路都一样，只不过实现代码换了而已，到现在为止，小程序的开发工具一个大版本都没有（最新版本是0.11.112301），发展还需要一段时间，这段时间够你去学的啦

3、小程序究竟是用什么语言

个人认为是修改版的HTML、CSS、js，因为它跟前端的很像，只是变了些东西，例如没有HTML 的 div 容器，现在可以用 view 、scroll-view ，等下再分析；如果你是接触过前端开发一段时间，那你上手估计只需要几个小时，或者更短，如果你是做其他开发，没接触过前端开发，那你就需要去熟悉一下HTML、CSS、JS 的语法了，推荐几个网站：(不分先后)菜鸟教程 ，作者也是在这学习的喔1纳米学习 ， 这个网站比较全面，总有你需要的简书 ，程序员很多都在简书开源，我也是其中之一Github ， 这个不解释sololearn，这个是纯英文的，不过挺好的，一步一步学习

#四、开发前的准备

#五、小程序的文件格式 文档

1、js 文件是 数据获取（其中Page必须是首字段，不能修改，数据都放data里面，自定义事件同级）

//获取应用实例var app = getApp()Page({ // 数据，在 WXML 中 通过 {{motto}} 就可以拿到对应 data 中的 motto 字段的值 data: { motto: 'MiHome_Store', userInfo: {}, indicatorDots: true, autoplay: true, interval: 3000, duration: 100 }, //事件处理函数，可以通过 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }})

不设置全局窗口window{ "pages":[ "pages/index/index", "pages/logs/logs" ]}

设置全局窗口window，在app.json 中设置{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false }}

单独页面中设置窗口配置信息，不需要添加window标签{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "gitkong", "navigationBarTextStyle":"black"}

#六、我是怎么写出来的（代码比较多，只给出做法思路，详细看Demo）

1、首先定好要显示什么东西出来，当然要目录名字 和 箭头（有跳转标志），所以在对应 WXML 中可以先创建一条带有名字 和 图片的 view，其中 container 是 整个底部的view，承接目录的

目录结构

``` > 保存编译（command + s），然后就能显示出来了

2、接下来就要去布局样式了，在对应 WXSS 文件中 编写 CSS 代码

/*指定子类布局，通过空格*/.container .frame-item{ background-color: lightcyan; /*内边距*/ /*padding-left: 20px;*/ width: 100%; height: 44px; /*保持一致，不管子控件*/ flex: 1; /*有四个值，上右下左*/ margin: 10rpx; /*素内弹性盒元素的方向,row|row-reverse|column|column-reverse|initial|inherit;*//*row 是水平向右，默认的*/ display: flex; /*flex-direction: row;*/ /*垂直对齐居中*/ align-items: center; /*justify-content属性定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;*/ justify-content: space-between;}/*不用选择器，就是全部text 都设置*/text{ /*左对齐*/ text-align: left; /*内边距*/ padding-left: 20px; font-size: 16px;}image{ width: 20px; height: 20px; /*外边距*/ margin-right: 20px;}

保存编译（command + s），然后你发现正常显示了（新项目默认app.wxss 中有布局，将 padding: 200rpx 0; 注释掉 就能显示如下效果）

3、事件处理，可以通过 bindtap="对应 js 里面的方法名" 给 view 绑定一个 事件WXML 中 绑定了 事件

目录结构

```

对应 js 文件中的方法，方法里面实现了跳转，通过 wx.navigateTo 跳转，url 传入的是 绝对路径

//事件处理函数bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' })}

```

WXSS 中实现两种样式，显示和隐藏

.frame-detail-view {/*不显示*/display: none;}

.frame-detail-view-show{/*显示*/width: 100%;/*垂直布局*/display: flex;flex-direction: column;}

#七、手机预览

需要 注册 AppID 才可以，而 注册 是需要 是企业 或者 政府 或 媒体 或 其他组织，没有个人的，因此个人项目是没办法手机上预览（类似真机调试）,如果你想试试真机效果，官方的Demo就可以

#八、总结

1、虽然入门才几天，但是遇到的问题还是挺多的，为了避免本文章篇幅太长，影响阅读，我在 **小程序开发中的记录【持续更新】 ** 都会记录下来，欢迎 关注 & like 1、作者一直使用Objective-c 编程，工作需要嘛，当然 swift 和 前端也有去学去写，原理相通，只不过是换种写法，这个作为个人项目，会一直更新，直到功能完善，Demo的最新更新会在文章开头 2、写的Demo 虽然挺简单的，思路应该也说清楚了，分享出来也应该能带大家入门，Github 地址 如果大家还有什么不明白的或者上文有什么不正确的地方，欢迎评论指教，谢谢 3、欢迎大家去简书关注我，喜欢给个like 和 star ，更新也需要动力喔~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。