微信小程序开发

1、基本的准备工做

一、工具安装

工具是有微信官方提供。

二、下载地址：

windows32位：https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1475052055457

windows64位：https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&t=1475052055457

macOS：https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki&t=1475052055457

三、安装过程：

对于Windows用户直接双击下一步的方式安装便可，此处注意咱们使用的版本是官方最新的版本（不须要破解），能够不用AppID，也就是说没有资格的开发者也能够测试。

下载好以后，双击进行安装-》下一步-》我接受-》选择安装路径-》下一步便可

安装好以后，使用本身的微信号进行扫描登陆。

4. 建立项目

• 咱们须要经过开发者工具，来完成小程序建立和代码编辑。
• 开发者工具安装完成后，打开并使用微信扫码登陆。选择建立“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），好比“个人第一个项目”，并选择一个本地的文件夹做为代码存储的目录，点击“新建项目”就能够了。
• 在建立过程当中，若是选择的本地文件夹是个空文件夹，开发者工具会提示，是否须要建立一个 quick start 项目。选择“是”，开发者工具会帮助咱们在开发目录里生成一个简单的 demo。

五、参数说明

• AppID：点击右下角无AppID
• 项目名称：随便填写，由于不涉及到部署，因此无所谓
• 项目目录：选择项目所在的文件夹
• 点击添加项目

项目建立成功后，咱们就能够点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里能够查看和编辑咱们的代码，在“调试”里能够测试代码并模拟小程序在微信客户端效果，在“项目”里能够发送到手机里预览实际效果。

六、能够选择在微信Web开放者工具中编码（也可选择你喜欢的编辑器）

七、编写代码

a、建立小程序实例

点击开发者工具左侧导航的“编辑”，咱们能够看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面咱们简单了解这三个文件的功能，方便修改以及从头开发本身的微信小程序。

app.js是小程序的脚本代码。咱们能够在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

//app.js App({ onLaunch: function () { // 展现本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登陆 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经受权，能够直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 能够将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回 // 因此此处加入 callback 以防止这种状况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } })

b、app.json 是对整个小程序的全局配置。

咱们能够在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

pages

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

文件名不须要写文件后缀，由于框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

如开发目录为：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

则，咱们须要在 app.json 中写

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

window

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

tabBar

若是咱们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏能够切换页面），那么咱们能够经过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

　　一、当设置 position 为 top 时，将不会显示 icon

　　二、tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 其中 list 接受一个数组，数组中的每一个项都是一个对象，其属性值以下：

networkTimeout

能够设置各类网络请求的超时时间。

属性说明：

debug

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

page.json

每个小程序页面也可使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，因此无需写 window 这个键，如：

2、开发体验阶段

一、理解微信小程序的架构

通常都是根据这个平台的hello word示例

项目结构

二、项目的配置

• 在项目下的app.json中配置
• 在pages/下建立每个页面，每一个页面都是一个文件夹包含3个文件JS  WXML  WXSS
• 接下来须要在项目下的app.json中配置pages
• pages中的第一项会做为默认页面呈现。

三、页面结构

文件结构

• 小程序包含一个描述总体程序的 app 和多个描述各自页面的 page。
• 一个小程序主体部分由三个文件组成，必须放在项目的根目录，以下：

一个页面是由多个文件组成。js：定义页面的逻辑。json：页面配置。wxml：页面结构。wxss：页面样式表

注意：为了方便开发者减小配置项，咱们规定描述页面的这四个文件必须具备相同的路径与文件名。

四、页面与页面之间跳转可使用navigator组件

<view class="btn-area"> <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator> <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator> </view>

页面与页面之间传值方式：相似于web开发的方式：?参数

跳转到的页面经过onLoad方法的参数拿到