Menu
小程序资讯
小程序资讯
微信小程序简易全攻略《一》开始构建与创建页面
时间:2016-10-20 14:23:00

一:开始构建

最近微信小程序开始火起来了,虽然还没开放公测,但是开发工具,本地环境却是可以构建了

废话不多说,直接进入正题;


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 中添加一个目录

(当然如果你觉得写在现有的目录里面就好 那这一步就省略啦)

点击左侧的 编辑  -->  点中 pages 文件夹  -->   点击右上角的  +  号  --> 在下拉菜单中选择 目录  --> 弹出框中 填写目录 名称 (这里我们写了test)--> 点击 确定

2. 新建一个wxml 文件

选中 test  文件夹 --> 点击 右上角  + 号  --->  选择  wxml 类型 文件  --> 填入文件名  (注意 这里必须填写 后缀名 至少 我的版本是必须填入的)

3. 编辑test.wxml 文件

为了方便测试 我们随便 填写点内容进去

[html] view plain copy
  1. <view class="container">  
  2.     <text>这是我的test页面哦哦!!!</text>  
  3. </view>  


4. 创建test.js文件

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

[javascript] view plain copy
  1. //test.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     userInfo: {}  
  7.   },  
  8.   onLoad: function () {  
  9.     console.log('onLoad test');  
  10.   }  
  11. })  



5. 将test 页面加入 app.json

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

6. 在首页加入访问链接

好了 上面路径也加好了 我们得加个入口 才能看到自己写的页面啊 , 小程序的首页一般是默认显示 pages 属性

中的第一条路径所指向的页面  ,如果我们不想破坏原有的 那么 我们直接找到首页  pages/index/index.wxml  添加一个链接

[html] view plain copy
  1. <view class="btn-area">  
  2.    <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
  3.  </view>  


7. 访问

一且准备就绪 ,点击左下角的 “编译”,出现如下 页面 


然后 点击 “”跳转test页面“”


哇哈哈,看到了没,你的页面做好了!!!(注意所有页面编辑后 请按 ctrl + s 保存键)