小程序-开发入门

各位好，2017年1月9号，随着小程序上线的序幕，一场由微信挑起的原生APP与小程序的线上撕逼正式拉开了序幕。一时间沸腾的网络文章诸如《原生APP已死》的文章成爆炸之势。作为一名Android的原生开发者，不免心头一紧，吃着瓜子把这些耸人听闻的文章看完。所谓的都是标题党是一家之言。
我个人认为小程序的出现只是在强调线下运营和线上合作的商业模式，追求用完即起走的理念，跟大部分的原生APP还是存在一定的差距的，因为并不是每一款应用都符合用完即走的使用场景，原生开发的各位同仁还是不必要过分的担心。but，作为有一名程序员时刻保持一颗接收新事物的心态还是蛮好的，接下来马上尝鲜一下小程序，看看到底是什么鬼。。。。

入门级小程序的开发环境搭建

开发环境的搭建真的挺简单的按照官方给出的教程完全可以搞定，如果你没有appid，完全可以选择不使用appid来编写demo，这对于开发学习也是一点问题也没有的。以下来自官网
下载小程序的开发工具，一路安装：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2017112

登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。

开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

Hello world

自动生成的demo效果

屏幕适配

做过原生开发的同学特别是经历过Android各种分辨率设备摧残的同学能够深刻体会屏幕适配带来的折磨，小程序作为手机程序（请允许我这么定性），屏幕适配是也是一个至关重要的问题，那么问题来了Android在时配上可以配合dp单位来解决绝大部分的屏幕问题，iOS（我不专业）可以根据几个不同的机型等比缩放来解决适配，小程序是如何做得到的呢：

给设计和开发的同学都科普一下，小程序在开发过程中使用的单位是rpx，rpx（responsive pixel）:

可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

看完上边的文字介绍以后（来自官网），特别屁颠的跟我们的美工接洽，要求小程序的设计稿按照疯6的2倍来标注尺寸，但是拿到稿件开始开发的时候就一脸蒙圈了，完全不是那个样子嘛，一阵资料查找就是大家看到的这张图，设计同事是按照iphone6 750*1334来做搞的完全不是所谓的375，所以只要按照1：1来标注尺寸就欧可了。。。。。（写给装B失败的自己）

常用快捷键

1. 常用快捷键格式调整
   
   • Ctrl+S:保存文件
   • Ctrl+[， Ctrl+]:代码行缩进
   • Ctrl+Shift+[， Ctrl+Shift+]:折叠打开代码块
   • Ctrl+C Ctrl+V:复制粘贴，如果没有选中任何文字则复制粘贴一行
   • Shift+Alt+F:代码格式化
   • Alt+Up，Alt+Down:上下移动一行
   • Shift+Alt+Up，Shift+Alt+Down:向上向下复制一行
   • Ctrl+Shift+Enter:在当前行上方插入一行
2. 光标相关快捷键
   
   • Ctrl+End:移动到文件结尾
   • Ctrl+Home:移动到文件开头
   • Ctrl+i:选中当前行
   • Shift+End:选择从光标到行尾
   • Shift+Home:选择从行首到光标处
   • Ctrl+Shift+L:选中所有匹配

纯属简易的教程，给大家做一个简单的了解认识，官网的讲解已经很详细的请大家移步
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

欢迎发家光临开发者小程序QQ群 小程序Club：
344510223