应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-17 17:10 浏览次数:194


一:已经开始构筑


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


废话不多说道,轻易步入正题;


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 留存键)

TAG标签:
阅读推荐