微信小程序简易全攻略《一》开始构建与创建页面

一：已经开始构筑

最近微信小程序已经开始火出来了，虽然还没有对外开放内测，但是开发工具，本地环境却是可以构筑了

废话不多说道，轻易步入正题；

1. 首先下载工具

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN

页面上面的链接 找出小程序开发者工具 页面

浏览 对应版本，傻瓜式的加装不必展毛

2. 构筑小程序

加装顺利完成后 双击 关上应用领域

关上微信并读取 证实登入即可

页面嵌入项目

挑选 并无 AppID --> 核对项目名称 --> 挑选项目目录（没的话可以先建立一个空文件夹） --> 页面 嵌入项目

欧了 直观的 hello world 就建立不好了

二：建立页面

不好了 hello world 建立不好了 ，咱已经开始写下页面了，那么如何建立一个直观的页面呢，

废话不多说道，已经开始撸代码

新建一个页面须要以下几步，

1. 在pages 中嵌入一个目录

（当然如果你真的写下在现有的目录里面就不好 那这一步就省略啦）

页面左侧的 编辑 --> Behren pages 文件夹 --> 页面右上角的 + 号 --> 在下拉菜单中挑选 目录 --> 插入侧边中 核对目录 名称 （这里我们写下了test）--> 页面 确认

2. 新建一个wxml 文件

选上 test 文件夹 --> 页面 右上角 + 号 ---> 挑选 wxml 类型 文件 --> 插入文件名 （特别注意 这里必须核对 后缀名 至少 我的版本就是必须插入的）

3. 编辑test.wxml 文件

为了便利测试 我们随便 核对点内容进来

[html]

4. 建立test.js文件

采用同样的方法在test 目录下建立一个 test.js 文件

[javascript]

//test.js

//以获取应用领域实例

var app = getApp()

Page({

data: {

userInfo: {}

},

onLoad: function () {

console.log('onLoad test');

}

})

5. 将test 页面重新加入 app.json

在pages 属性中 重新加入一条 test 页面所在的目录 这里就是相对路径 首部不必核对 /

6. 在首页重新加入出访链接

不好了 上面路径也雷涅了 我们公著个入口 就可以看见自己写下的页面啊 ， 小程序的首页通常就是预设表明 pages 属性

中的第一条路径所指向的页面 ，如果我们不敢毁坏旧有的 那么 我们轻易找出首页 pages/index/index.wxml 嵌入一个链接

[html]

7. 出访

一且准备就绪 ，页面左下角的 “编程”，发生如下 页面

然后 页面 “”重定向test页面“”

哇哈哈，看见了没有，你的页面搞好了！！！（特别注意所有页面编辑后 恳请按 ctrl + s 留存键）