小程序开发之【前端开发】【学习第一节】

学习前必须了解的：

学习第一天，先要了解下小程序是什么。按官方说法来说，小程序是一种不需要下载安装即可使用的应用。（这种说法应该算比较勉强），从技术层面上说，小程序采用了类似React Native和Weex一样的解析技术，开发者可编写一套代码在多端运行（Android微信，IOS微信，浏览器）。其实严格来说，小程序也是需要下载安装的，只是由于技术实现方案和官方规定小程序包容量不得超过1M，使得下载、安装特别快，所以用户根本感觉不到它的下载及安装而已。为了达到这个目的，小程序提供了一套完整的开发框架、丰富的组件和API，相比RN和Weex，小程序将技术和商业进行了完美的结合。

（https://www.jianshu.com/p/56cfc2c602ae，一篇介绍小程序很有意思的文章）

之前提到的React Native和Weex，也是两套开发框架，RN是Facebook开源的跨平台移动应用开发框架，这些大体知识在百度google都可以了解到。如果有想学习的也可以自行去学习，作者没有利用两套框架开发的经（其实是本人太菜了），这里，不多说了。

小程序具有独立的注册、发布流程。开发小程序首先需要在微信公众平台上注册小程序，完善基本信息，然后下载开发者工具进行编码，最后通过开发者工具提交代码（这些在微信小程序官网应该都有提及），官方审核通过后便可发布了。要注意的是，每个小程序一年需要缴纳300元，所有小程序都需要绑定一个电子邮箱，一个手机号最多绑定5个小程序。

小程序注册：

https://mp.weixin.qq.com/wxopen/waregister?action=step1，官网已经给出了很全面的注册步骤，按照官网来就行了。这里不必多说。要提醒的是，AppID十分重要，只有填写了AppID的项目才能通过手机微信扫码进行真机测试。

第一个小程序：

在官网首页下载开发者工具，即可利用它的开发工具进行开发。

创建第一个项目，基本就是这样：

这个demo是官方提供的示例，第一个页面展示了当前登录的用户信息，点击头像会跳转到一个记录当前小程序启动时间的日志页面。

我们简单的将pages/index/index.wxml修改为：

<!--index.wxml-->
<view class="container">
<view class="userinfo">
<buttonwx:if="{{!hasUserInfo && canIUse}}"open-type="getUserInfo"bindgetuserinfo="getUserInfo"> 获取头像昵称</button>
<blockwx:else>
<imagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<!-- 修改这句代码 -->
<text class="user-motto">我的第一个小程序</text>
</view>
</view>

修改后，重新编辑，如下：

填写了AppID的项目可以选择 项目->预览，扫描二维码在微信中体验项目。
这个过程很简单，仅是体验了小程序的创建过程。这仅仅是个基础，对于开发小程序实际案例远远不够。