微信小程序新手开发记录文档二-Indexof.PDFVIP

微信小程序新手开发记录文档《二》 一、小程序应用场景 小程序主打的是比 APP 更轻量的形态，简单的开发，却接近 app 的体验，无需下载，扫码打开。一些高频的金融类、 电商类、教育类等其实是不适合接入小程序的。这些应用服务对功能的要求都很重，小程序难以承载。而且小程序不能 像微信公众号一样被关注、群推送消息以及转发朋友圈，这也就意味着，它没有办法获取用户更多的信息，也不便于深 度营销。 主打适合小程序的产品： * 初创型企业的 MVP 产品 *开发和设计能力有限的产品 *功能轻、用完即走、非即时、可异步 *基于轻社交场景应用、跨平台使用 二、从操作 DOM 转为操作数据 微信开放的接口更为严谨，结构必须采用他提供给我们的组件，外部的框架和插件都不能在这里使用，让开发者完全脱 离操作 DOM ，开发思想转变很大。 生命周期：( 从 index.js 文件看) 1 ）在首页的 console 可以看出顺序是 App Launch--App Show--onload--onShow--onReady。 首先是整个 app 的启动与显示，app 的启动在 app.js 里面可以配置，其次再进入到各个页面的加载显示等等。 例如，App()函数用来注册一个小程序，接受一个Object 参数，其指定小程序。 生命周期函数等。 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: I am global data }) 2 ）小程序的开发是基于微信提供的一套应用框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、 任务管理、数据安全等基础功能，对上层提供了一套完整的 Javascript Api ，使得开发者能够非常方便的使用到微信客 户端提供的各种基础功能，快速构建一个应用。 框架提供了自己的视图层描述语言 WXML 和 WXSS ，以及基于JavaScript 的逻辑层框架，并在视图层与逻辑层之 间通过**单向数据绑定**进行数据传输，使开发者更加聚焦于数据与逻辑上。 三、新建的项目各文件详解： 1 ）pages 文件夹 ：是页面管理文件夹 下面一般可以自定义页面，如 demo 中的 index 欢迎页面。首页 index 页面包含几个文件：index.js ，index.wxss ， index.wxml ，index.json 先来逐一介绍下这些文件是干嘛的。 index.js 文件是以js 结尾的文件 ，是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数，获取 小程序实例，声明并处理数据，响应页面交互事件等。是必须要的。 index.wxml 文件是页面的结构文件（类似于 H5 的 html 标记文件）。是必须要的。 index.wxss 文件是页面的样式表。非必要。当有页面样式表文件时候，页面样式表中的样式规则会层叠覆盖 app.wxss 文件中的样式规则。如果不指定页面的样式规则表，也可以在页面的结构文件中直接使用app.wxss 中指定 的样式规则。 index.json 文件是页面的配置文件。非必要。当有页面的配置文件时候，配置项在该页面会覆盖 app.json 文件中的 window 中相同的配置项，如果没有指定配置文件，则在该页面直接使用app.json 中的默认配置文件。 2 ）app.js 文件是小程序的脚本代码。监听并处理小程序的生命周期函数，并声明全局变量，调用框架的 API ，同步存 储和同步读取本地数据。 3 ）app.json 文件是对整个小程序的全局配置。可以在该文件中配置小程序有哪些页面组成，配置小程序窗口背景， 配置导航条样式，配置默认标题。（注意，不可添加注释） 4 ）app.wxss 文件是小程序的公共样式表文件。我们可以在页面组件的 class 属性上直接使用 app.wxss 文件中声明的 样式规则。 在 index.wxss 中设计组件位置和属性样式。 rpx 单位是微信小程序中 css 的尺寸单位，rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px ，共有750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px =