持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

小程序和网页开发的区别

网页开发的渲染线程和脚本是互斥的，长时间无响应的话页面会失去响应。运行环境是浏览器，所以可以使用浏览器的Dom APi,来进行Dom操作。
小程序的开发语言是JavaScript，在小程序中，逻辑层和渲染层是分开的，分别运行在不同的线程中。逻辑层运行在JSCore中，没有浏览器对象，所以没有Dom api和BOM api。这就是一些js库（Jquery等）在小程序中无法使用的原因。同时一些NPM包在小程序也无法运行。

小程序开发

1. 申请账号

进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。小程序的 AppID 相当于小程序平台的一个身份证

2. 安装开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装

3. 小程序代码构成

.json 后缀的 JSON 配置文件

Key 值加双引号
.wxml 后缀的 WXML 模板文件

小程序给开发者包装好的标签 view, button, text，多了wx:if这样的属性以及 {{ }} 这样的表达式，if/else, for等控制能力，用 wx: 开头的属性来表达。
.wxss 后缀的 WXSS 样式文件

新的尺寸单位 rpx，仅支持部分 CSS 选择器
.js 后缀的 JS 脚本逻辑文件

用来做界面和用户交互：响应用户的点击

<view>{{ msg }}</view> 
<button bindtap="clickMe">点击我</button>

Page({ 
    clickMe: function() { 
        this.setData({ 
            msg: "Hello World" 
        }) 
    } 
})

4. 小程序宿主环境

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发。

小程序页面

在打开小程序之前，会把整个小程序的代码包下载到本地。通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径，在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）

{ 
    "pages":[ 
        "pages/index/index", 
        "pages/logs/logs" 
    ] 
}

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行

App({ 
    onLaunch: function () { 
    // 小程序启动之后 触发 
    } 
})

5. 小程序发布

开发版：开发人员自己测试使用
体验版：选择某个开发版作为体验版，作为小程序的体验成员可以扫码预览
审核中版本：将体验版提交审核，小程序的运维人员进行审核
线上版: 提交审核通过的版本就是线上版，此时所有人都可通过搜索或者小程序码进行预览

📻小程序开发指南