微信小程序开发-从基础到实战（一）

一、开发准备

小程序文档官方地址：https://mp.weixin.qq.com/debug/wxadoc/dev/

微信开发者工具地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

二、新建项目

1.使用微信扫一扫登录开发工具

2.选择小程序项目

3.点击“+”新建项目，选择项目地址，输入项目名称

4.官方推荐开发工具模拟器为iPhone6界面样式

下图为开发工具各个部分所在，红圈代表初始启动时项目打开页面，点击打开即可跳转到编辑页面

5.快速启动模板目录介绍

小程序中主要有.js，.wxml，.wxss，wxs，.json这几种文件，将小程序分为配置、逻辑层、视图层

其中（page代表各页面名称，如index页面则为index.json，index.wxml，index.js）

json文件负责配置：app.json（小程序公共设置），page.json（页面配置）

js负责逻辑层，用于后台逻辑与视图层页面的交互：app.json（小程序逻辑），page.json（页面逻辑）

视图层由wxml，wxs，wxss文件共同负责

wxml搭建页面大体结构，wxss负责页面样式渲染（最好将wxml文件中的所有样式写在wxss文件，以免影响页面的渲染效率），wxs是小程序的一套脚本语言，结合wxml可以构建出页面的结构

在快速启动模板中pages文件夹主要包含了页面文件夹，utils包含小程序项目常用的方法，app.json/.wxss/.js为小程序公共设置/公共样式表/逻辑，project.config.json为本项目的项目配置

6.app.json文件介绍（以下是一个包含了所有配置选项的 app.json，详情见：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html ）

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.json 配置项列表

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

 

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

networkTimeout

可以设置各种网络请求的超时时间。

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

7.app.js（主要为注册小程序，参考自：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html）

 

App()

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

getApp()

全局的 getApp() 函数可以用来获取到小程序实例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

• App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

8.app.wxss（参考自：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html）

 

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。