小程序开发（一）| 简介
小程序开发（一）| 简介
1. 发展
每一款手机app的开发都有webview的部分，所以微信小程序也就是微信中的webview
代码构成所发展出来的产物。微信中的webview逐渐成为移动web的重要入口，对提升用户体验有着很大的帮助，因此微信对其加工，提供了一系列JS API。
一开始，这些API只在微信内部被使用，直到2015年初，微信发布了一套网页开发工具包，称之为JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API，让开发者也能够使用到微信的能力。
2016年9月，小程序开始内测，由腾讯云为小程序提供云端服务器及相关技术服务。
内测中的小程序其实也出现过一些问题，在JS-SDK下，开发者的体验并不算太好。所以微信需要设计一个全新的系统，它需要使得所有的开发者都能做到：
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
2017年初，第一批小程序上线运行。这几年来，小程序在网络、安全、数据等方面也不断完善，为微信用户和开发者提供着便捷服务和优质体验。
2.代码构成
小程序的主要开发语言是JavaScript，除此之外还有另外三种文件：WXSS、WXML、JSON。每个页面都由这四种类型的文件构成，他们的作用分别是：
JSON配置：JSON是一种数据格式，并不是编程语言。在小程序中，JSON扮演着静态资源配置的角色。
举个例子：
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{//所有页面路径"pages":["pages/index/index","pages/myHome/index","pages/testpage/index",],
//底部导航栏样式"tabBar":{"color": "black","backgroundColor":"#fff","selectedColor": "#2782d2","list": [{"pagePath": "pages/index/index","text": "首页","iconPath":"images/indexicon.png","selectedIconPath":"images/indexicon_selected.png"},{"pagePath": "pages/teame/teame","text": "组队","iconPath":"images/teameicon.png","selectedIconPath":"images/teameicon_selected.png"}]},
//顶部导航栏样式"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#AFE1FF","navigationBarTitleText": "我的小程序","navigationBarTextStyle":"black"},
//超时配置"networkTimeout": {"request": 10000,"downloadFile": 10000},
//采用新版组件v2样式"style": "v2",
//小程序索引方式配置"sitemapLocation": "sitemap.json"
}
WXML模板：WXML和网页开发中的HTML十分相似，也有标签、属性组成，起到描述页面结构的作用。但WXML和HTML也有不同之处：
- 标签不同，HTML的比较常用的有div, p, span，在WXML中的标签为view, button, text。WXML中有更多小程序自带的组件，比如map、swiper等等。这是因为HTML直接由浏览器渲染出来，而小程序是处于移动app中的webview中，相比于传统的HTML开发，会有一定的局限性，但在小程序框架中，我们有更多微信已经封装好的功能。
- MVVM的开发模式，小程序的开发框架类似React和Vue。WXML可以直接使用wx:if 这样的属性以及 {{ }} 这样的表达式，相关的变量由js来管理状态。
举个例子：
WXML: <text wx:if=”{{condtion}}”>{{msg}}</text>
JS: this.setData({ msg: "Hello World" })
- 使用Moustache模板语法，可以将双花括号内的变量替换为对应的data变量，这里是msg，这种语法在php、python等语言中也会使用。
- 使用wx:if控制此处 标签是否存在，当我们设置
this.setData({condition:false})时，页面上的msg就不存在了
WXSS样式：WXSS延续了网页开发中CSS的大部分属性，也对css进行了扩写。
新增尺寸单位rpx，由于小程序一般只会在手机上打开，对不同的手机型号，我们需要用rpx来进行自动适配。rpx是以iphone6的尺寸为标准的，rpx和px的换算是：1 rpx = 0.5 px = 1 物理像素
也就是说，当我们需要绘制一个长100px，高20px的盒子，换算成rpx，
width=200rpx，height=40rpx。
JS 逻辑交互：小程序还需要能够与用户进行交互，响应用户点击、获取用户位置等操作。
Click：
<view>{{ msg }}</view><button bindtap="clickMe">点击我</button>
Page({clickMe: function() {this.setData({ msg: "Hello World" })}})
这里的bindtap就是获取用户点击状态的，当我们点击这里的按钮时，触发clickMe方法。
- 其它的API有wx.onCompassChange(监听罗盘数据变化)、wx.request(发送异步请求)、wx.navigateTo(路由跳转)，等等。具体的使用方式和其它API，参考微信官方开放文档API使用。
3.运行环境
与普通网页开发的区别
- 我们在网页开发中面对的环境是各种各样的浏览器，小程序开发需要面对的是手机操作系统，在移动端需要面对
Safari、Chrome以及 iOS、Android 系统中的各式 WebView。 - 小程序的线程划分更加友好。网页开发中，渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应。在小程序中，逻辑层和渲染层分为两个线程运行，一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由微信客户端转发，小程序的通信模型下图所示。
逻辑层的运行
网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。也能够在逻辑层中应用一些前端常用的库，比如jQuery、zepto等
小程序的逻辑层由于运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
程序与页面
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
通过app.json就能获取到当前小程序的一些基础配置，并识别出排在页面路径第一位的“首页”并加载
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调被执行:
App({onLaunch: function () {// 小程序启动之后 触发}})
整个小程序只有一个App实例，加载新的页面不触发onlaunch回调。
当我们需要在新页面加载时触发事件，可以将方法写在每个页面js文件的onload中
Page({data: { // 参与页面渲染的数据logs: []},onLoad: function () {// 页面渲染后 执行}
})
- 生命周期
应用生命周期app.js
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError:小程序发生脚本错误，或 api 调用失败
页面生命周期 各js文件中
（1）onLoad：首次进入页面加载时触发
（2）onShow：首次进入或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：页面隐藏时触发
（5）onUnload：页面卸载时触发
下面是一些参考资料
详情页设计小程序开发总结 简介 详情页设计小程序功能 详情页设计源码介绍 详情页设计小程序 首页 详情页 开发台文件介绍 详情页设计小程序总结 详情页设计免费源码 简介 从电商出现后,详情页设计变得非 ... 图片找茬找不同流量主小程序开发 功能简介// 该应用是图片找不同,找茬游戏.多人对战一起找 .可配合流量主广告. 适用主体// 个人用户和企业用户都可以使用 . 后台// logo.背景颜色.系统设 ... 农场种树养成兑换商城小程序开发 逻辑简介// 用户通过赠送的能量购买小树苗进行种植操作,我们后台可以对树的生长周期和能量收益进行各种设置.获得的能量可以兑换树,树可以用来兑换商城的小礼品.可以邀请好友 ... 对健身的需求正在增加. 尽管体育馆正在逐步增加,但健身仍受到某些限制.首先是时间限制. 健身房有自己的营业时间,健身营业时间也是用户的正常工作时间. 除周末外,大多数人没有多余的运动时间. 其次,健身 ... 微信小程序开发 我是一名java高级开发工程师,已有七年的工作经验,从事过多个大型项目的开发与架构设计 王鹤然 ¥298.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 ... 欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行.动静不失其时,其道光明. 目录 1.缘起 2.小程序与普通网页开发的区别 3.API 简介 4.总结 1.缘起 在日常生活中 ... 概览 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式. 使用公众号网页调试,开发者可以 ... 微信门店小程序怎样创建 门店小程序创建方法简介 微信门店小程序是什么东西?门店小程序要怎样创建?还不清楚微信门店小程序详情的小伙伴们抓紧时间跟上小编一起来看一下吧! 门店小程序是什么? 微信发 ... 开发实战篇之二 前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...小程序开发（一）| 简介相关推荐
最新文章
热门文章