首先了解下小程序是干嘛的？
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。（简单点来说就是在手机上不用下载App，在微信里通过小程序也能得到App类似的友好体验）
开发一个小程序需要具备哪些技能？
在开发小程序之前，你至少需要掌握 HTML、CSS、JavaScript这三种语言即可，而这三种语言也就是前端三剑客，正是我们天天都在搞的事。
开发一个小程序前需要做的准备工作
点击申请 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
小程序账号有了，那么需要下载一个开发小程序IDE了。点击下载微信开发者工具
下载完成后打开是会让你填写AppId的，
AppId在小程序后台的设置>>>开发者设置里查看
然后勾选快速生成模板
打开后页面会自动生成一个小程序所需的所有基础文件。
包括
app.json
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、底部 tab 等。
然后我们来看页面组成部分，
每一个小程序页面都是由四部分组成：
第一个：.json 后缀的 JSON 配置文件
{
"pages":[
"pages/index/index"，
"pages/newpage/newpage" //比如我如果需要新建一个页面, 这样添加路由即可
],
"window":{ //window是配置小程序页面样式比如主题颜色，标题等等
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "青团兼职实习",
"navigationBarTextStyle":"black"
}
}
设置小程序底部tabbar
第二个：.wxml 后缀的 WXML 模板文件 （类似于html）
HTML 经常会用到的标签是 div, p, span，而小程序的 WXML 用的标签是 view, button, text 等等，具体有哪些可以查看下传送门
官方快速创建源码为：
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
第三个：.wxss 后缀的 WXSS 样式文件 （完全类似css）
完全就是跟CSS一毛一样，方便了三剑客，WXSS 在底层支持新的尺寸单位 rpx ，省去了我们换算的烦恼。
第四个：.js 后缀的 Javascript 脚本逻辑文件 （就是js）
我们做个测试，你需要把一个 hello, coder 的字符串显示在界面上。 WXML 是这么写：
<view>{{message}}</view>
JS 只需要管理状态即可:
this.setData({ //this.setData 是官方提供的使视图变更的方法，跟Vue不一样的是所有变量赋值完成后需要使用该方法触发视图更新
message: 'hello, coder'
})
这样写即可正常把数据绑定上。
渲染后就是：
<view>hello, coder</view>
*小程序的生命周期：
这里我就挑两个举例子：onLoad和onShow
简单理解下 onLoad里面的方法就是进入页面后，只执行一次就不会再执行了，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
而onShow是只要页面隐藏，也就是跳转页面了或者使用图片预览功能挡住当前页面了，图片预览一关闭，页面就会执行一次onShow里面的方法。再比如我们在当前页面进行操作后跳转走，返回的时候希望更改状态那就使用onShow。
*页面内基础组件
1.<view></view> 视图容器(相当于div)。
2.<text></text> 文本 （相当于span，以前业务里有个需要长按复制的功能，view长按复制不了，text提供了一个selectable的属性 可以控制文本是否可长按复制）
3.所有的表单组件 form，input，radio，checkbox，label，button等，其中button组件赋予了很多高级功能。比如点击获取用户信息
a) <button open-type="getUserInfo"></button>
获取用户授权信息，如下图：
b) <button open-type="contact"></button>
打开客服功能 如下图：
c) <button open-type="share"></button>
唤起分享好友操作面板，如下图：
d)
<button open-type="getPhoneNumber"></button>获取当前微信绑定的手机号，需要后端解析json文件，才能拿到用户手机号，如下图：
e) <button open-type="launchApp"></button>
这个操作就图片展示不了了，功能是App分享出来的小程序可通过这个方法 跳转回App（如果不是App分享出来的小程序那就跳转不回App）
f) <button open-type="openSetting"></button>
跳转用户授权设置页面，如下图：
这里面本地环境和开发者工具上 获取用户信息，跳转客服页面，是没有弹窗了，只能真机调试，分享的操作面板也跟真机不一致（一切以真机为准，有些功能在开发者工具上可行，在真机上就不行了，差异挺大的）
媒体组件
<image></image> 图片组件，该组件所有的图片都有个默认的宽高度300 x 225px，去掉默认宽高设置mode=“widthFix” 即可，意思是宽度不变，高度自动变化，保持原图宽高比不变
当然还少不了地图组件：
<map></map>
map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
这里列了一个常用的基础组件列表。当然官方也提供了更多的组件, 总的来说组件还是挺多的 但是有些原生组件导致的bug太多，官方也说是微信底层逻辑不太好统一修改，只能由我们来做兼容处理了。多啰嗦一句这里面问题最多的是textarea组件，慎用啊～
*路由配置以及跳转方法
在小程序中所有页面的路由全部由框架进行管理。
页面以栈的方式进行管理，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
1.wx.navigateTo 保留当前页面，跳转到应用内的某个页面（常用）
2.wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。
3.wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
4.wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（也就是页面出栈）
- wx.reLaunch 关闭所有页面，打开到应用内的某个页面。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是第二个页面
wx.navigateTo({
url: 'pages/pages/second'
})
// 此处是三页面
wx.navigateTo({
url: 'pages/third/third'
})
// 在第三个页面内 navigateBack，将返回第一个页面
wx.navigateBack({
delta: 2
})
*自定义转发字段
有些页面是需要做转发的，那就需要在js里定义onShareAppMessage方法，可手动设置页面分享内容等等（高级版webview分享信息传递，下一章节会提到）
Page({
onShareAppMessage: function () {
return {
title: '青团社兼职-大学生找兼职首选平台',
path: '/page/partdetails/partdetails?partJobId=xxx'
}
}
})
*模块化
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports才能对外暴露接口。
// common.js
function qtshe_part(name) {
console.log(`欢迎观看这篇文章 ${name} !`)
}
function qtshe_job(name) {
console.log(`感谢观看完这篇文章 ${name} !`)
}
module.exports.qtshe_part = qtshe_part
或者 exports.qtshe_job = qtshe_job
需要引用的地方
var common = require('common.js')
partJob: function() {
common. qtshe_part('前端攻城狮')
},
userJob() {
common. qtshe_job('前端攻城狮')
}
*最后要了解的肯定是数据请求了
通过该方法可以发起一个POST请求，请求相关
wx.request({
url: 'xxx', //服务器接口地址
data: { //请求的参数
x: '' ,
y: ''
},
header: { //设置请求的 header，header 中不能设置 Referer。
'content-type': 'application/json' // 默认值
},
method: 'POST', //（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res) { //成功回调
console.log(res.data)
},
fail: function(res) { //失败回调
console.log(res.errMsg)
}
})
结语：
第一章就说到这里了，这里只是简单的介绍了小程序的组成以及开发需要用的地方，下一章节将会讲到小程序的自定义组件开发以及webview配置问题，以及其他相关功能组件具体可以在微信搜一搜 搜索兼职 然后通过服务直达区找到 《青团社兼职实习》，有什么问题或意见欢迎指出。
青团社招聘：
招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层
简历投递到：hr@qtshe.com || haochen@qtshe.com
职位描述：
1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量
2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案
3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界
