iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.0开发者工具初中级教程分享
iKcamp官网:http://www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
第一章:小程序初级入门教程
工具安装
在上一节第 8 步所展示的页面中,可以点击 开发者工具
直接进入到下载页面,也可以直接访问 官网下载地址。然后根据自己的设备选择相应的下载
安装过程不再复述,一路默认。
下载开发工具
§ 小程序工具起手
此教程选择的工具为 mac 平台版本,没差
- 打开安装好的
微信web开发者工具
,需要用管理员
或开发者
的微信账号扫码登录。管理员账号
是上一节第 6 步中注册appID
时,绑定的微信账号。开发者账号可在上一节第 8 步中的添加开发者
中设置
- 登录成功后,选择
本地小程序项目
,然后添加项目
- 如果没有注册
appID
,也可以开发小程序项目,但部分功能会受限,比如在手机上预览。在这里,我们已经有了appID
- 添加成功后,我们的项目会在
微信web开发者工具
中自动打开并启动,可以在此工具中对代码进行修改、调试、断点、预览,文件有修改的话,项目会实时更新。
目录说明
项目生成后,会看到如下结构的目录文件:
├─ pages/ │ ├─ index/ │ ├─ index.js │ ├─ index.wxml │ ├─ index.wxss │ ├─ logs/ │ ├─ logs.js │ ├─ logs.json │ ├─ logs.wxml │ ├─ logs.wxss ├── utils/ │ ├─ util.js ├── app.js // 必备文件 ├── app.json // 必备文件 ├── app.wxss
先看下最外层的三个文件:app.js
、 app.json
、 app.wxss
- app.js
小程序的主入口文件,类似于我们在模块加载器时代(requirejs/seajs
)常常会码一个main.js
来作为程序的启动入口。如果你有接触过node - express
技术栈,理解起来会更贴切。注意:<span style="color:red">文件名不可更改</span>
我们可以在 app.js
里面对小程序在不同生命周期段进行处理,设置小程序里面的 全局变量
(比如只请求一次公用的数据,让所有的页面都能用)。
微信平台 app.js 说明文档
- app.json
小程序的全局配置文件,比如设置小程序有哪几个页面组成(目前是index
和logs
)、窗口表现(背景色等)、设置网络超时时间、设置导航条样式等背景色。注意:<span style="color:red">该文件不可添加任何注释内容</span>
- app.wxss
小程序的全局样式文件,在小程序中,所有的样式文件不再是.css
后缀,全都需要以.wxss
作为后缀。与传统的css
样式相比,wxss
支持@import
样式导入和像素单位自适应。
独立页面中的局部样式,请书写在相对的页面文件夹中,后面会有说明。
微信平台 app.wxss 样式说明文档
小程序的页面文件
app.json
文件中配置了当前小程序的两个页面 pages/index/index
和 pages/logs/logs
,可以看到,其实就是 文件的路径+文件名
组成。如果增加一个页面,需要在参数 pages
中把页面的地址配置进去。
细心的同学可能已经发现一个现象,每个页面文件夹,与里面的文件,名字都一样一样滴。是的,一般情况下,一个完整的页面需要 js
、wxss(css)
、wxml(html)
组成。
比如 index
页面,如果需要对 index
页面进行一些独立的配置,需要像 logs
一样,增加 index.json
文件来保存配置信息。
来看下 wxml
文件与 html
文件的区别
<!--index.wxml--> <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
传统的 html
文件由各种各样的标签组成,而在 wxml
中,可用的标签元素并不多,可以看到这里涉及到了 view
、image
、text
标签。
- view 相当于
div
,你可以这么去理解。 - image 相当于
img
,这个应该都懂了。 - text 很明显,用来标注文本的标签,既然是
文本
,肯定是行级元素
了。
还有一些内置好的组件标签,自带样式和特性,详见 官方文档
页面样式表 index.wxss
作用域只在当前页面生效,它可以覆盖 app.wxss
里面的样式规则。可以看到,与平时我们用的样式文件基本没差:
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }
页面脚本文件 index.js
跟 app.js
一样,包含了一个页面的生命周期,声明并处理数据,响应页面交互事件等。
//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })
下期更新内容:小程序初级入门教程-
小试牛刀
+发布流程
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
相关文章:
听说 2017 你想写前端?
前端开发者指南(2017)
翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程