小程序如何从0-1（第一章）

首先了解下小程序是干嘛的？

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。（简单点来说就是在手机上不用下载App，在微信里通过小程序也能得到App类似的友好体验）

开发一个小程序需要具备哪些技能？

在开发小程序之前，你至少需要掌握 HTML、CSS、JavaScript这三种语言即可，而这三种语言也就是前端三剑客，正是我们天天都在搞的事。

image.png

开发一个小程序前需要做的准备工作

点击申请 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

image.png

小程序账号有了，那么需要下载一个开发小程序IDE了。点击下载微信开发者工具
下载完成后打开是会让你填写AppId的，

image.png

AppId在小程序后台的设置>>>开发者设置里查看

image.png

然后勾选快速生成模板
打开后页面会自动生成一个小程序所需的所有基础文件。
包括

app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、底部 tab 等。
然后我们来看页面组成部分，
每一个小程序页面都是由四部分组成：

第一个：.json 后缀的 JSON 配置文件

{  "pages":[    "pages/index/index"，    "pages/newpage/newpage"   //比如我如果需要新建一个页面, 这样添加路由即可
  ],  "window":{  //window是配置小程序页面样式比如主题颜色，标题等等
    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "青团兼职实习",    "navigationBarTextStyle":"black"
  }
}

设置小程序底部tabbar

image.png

第二个：.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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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 ，省去了我们换算的烦恼。

image.png

第四个：.js 后缀的 Javascript 脚本逻辑文件 （就是js）

image.png

我们做个测试，你需要把一个 hello, coder 的字符串显示在界面上。 WXML 是这么写：

<view>{{message}}</view>

JS 只需要管理状态即可:

this.setData({   //this.setData 是官方提供的使视图变更的方法，跟Vue不一样的是所有变量赋值完成后需要使用该方法触发视图更新
  message: 'hello, coder'})

这样写即可正常把数据绑定上。
渲染后就是：

<view>hello, coder</view>

*小程序的生命周期：

image.png

这里我就挑两个举例子：onLoad和onShow
简单理解下 onLoad里面的方法就是进入页面后，只执行一次就不会再执行了，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
而onShow是只要页面隐藏，也就是跳转页面了或者使用图片预览功能挡住当前页面了，图片预览一关闭，页面就会执行一次onShow里面的方法。再比如我们在当前页面进行操作后跳转走，返回的时候希望更改状态那就使用onShow。

image.png

*页面内基础组件

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>

获取用户授权信息，如下图：

image.png

b) <button open-type="contact"></button>

打开客服功能 如下图：

image.png

c) <button open-type="share"></button>

唤起分享好友操作面板，如下图：

image.png

d)

<button open-type="getPhoneNumber"></button>获取当前微信绑定的手机号，需要后端解析json文件，才能拿到用户手机号，如下图：

image.png

e) <button open-type="launchApp"></button>

这个操作就图片展示不了了，功能是App分享出来的小程序可通过这个方法 跳转回App（如果不是App分享出来的小程序那就跳转不回App）

f) <button open-type="openSetting"></button>

跳转用户授权设置页面，如下图：

image.png

这里面本地环境和开发者工具上 获取用户信息，跳转客服页面，是没有弹窗了，只能真机调试，分享的操作面板也跟真机不一致（一切以真机为准，有些功能在开发者工具上可行，在真机上就不行了，差异挺大的）

媒体组件

<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 页面（也就是页面出栈）

1. wx.reLaunch 关闭所有页面，打开到应用内的某个页面。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是第二个页面wx.navigateTo({
  url: 'pages/pages/second'})// 此处是三页面wx.navigateTo({
  url: 'pages/third/third'})// 在第三个页面内 navigateBack，将返回第一个页面wx.navigateBack({
  delta: 2})

image.png

*自定义转发字段

有些页面是需要做转发的，那就需要在js里定义onShareAppMessage方法，可手动设置页面分享内容等等（高级版webview分享信息传递，下一章节会提到）

Page({  onShareAppMessage: function () {    return {      title: '青团社兼职-大学生找兼职首选平台',      path: '/page/partdetails/partdetails?partJobId=xxx'
    }
  }
})

*模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports才能对外暴露接口。

// common.jsfunction 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配置问题，以及其他相关功能组件具体可以在微信搜一搜 搜索兼职 然后通过服务直达区找到 《青团社兼职实习》，有什么问题或意见欢迎指出。

作者：一个被床封印的程序猿
链接：https://www.jianshu.com/p/a60004764129