使用微信开发者工具创建小程序项目
个人资源与分享网站:http://xiaocaoshare.com/
1.微信开发者工具自行到网上下载即可
2.打开微信开发者工具,如图所示:
点击创建后,如下图所示:
#### 项目结构
```
└─ empty-folder/ ·································· 项目所在目录
├─ pages/ ······································ 页面目录
│ ├─ index/ ··································· index页面
│ │ ├─ index.js ······························ index页面逻辑
│ │ ├─ index.wxml ···························· index页面结构
│ │ └─ index.wxss ···························· index页面样式
│ └─ logs/ ···································· logs页面
│ ├─ logs.js ······························· logs页面逻辑
│ ├─ logs.wxml ····························· logs页面结构
│ └─ logs.wxss ····························· logs页面样式
├─ utils/ ······································ 公共脚本目录
│ └─ util.js ·································· 工具脚本
├─ app.js ······································ 应用程序逻辑
├─ app.json ···································· 应用程序配置
└─ app.wxss ···································· 应用程序公共样式
```
#### 页面结构
每个页面组件也分为四个文件组成:
##### [page-name].js
页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理
##### [page-name].json
设置当前页面工作时的window的配置,此处会覆盖app.json中的window设置,也就是说只可以设置window中设置的属性
##### [page-name].wxml
> wxml指的是Wei Xin Markup Language
用于定义页面中元素结构的,语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法
##### [page-name].wxss
> wxml指的是Wei Xin Style Sheet
用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)
### 项目配置
> 相关链接:
> - [官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)
> - [生成配置文件](https://weapptool.com/start.html)
小程序中的配置文件分为两种:
- 全局配置文件,根目录下的app.json
- 页面配置文件,每个页面目录下的[page-name].json
##### app.json
项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)
```javascript
{
// 当前程序是由哪些页面组成的(第一项默认为初始页面)
// 所有使用到的组件或页面都必须在此体现
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
"pages": [ ... ],
// 应用程序窗口设置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": { ... },
// 应用导航栏设置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
"tabBar": { ... },
// 网络超时设置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {},
// 是否在控制台输出调试信息
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}
```
##### [page-name].json
用于指定特定页面工作时,window的设置:
```javascript
{
// 导航条背景色
"navigationBarBackgroundColor": "#35495e",
// 导航条前景色(只能是white/black)
"navigationBarTextStyle": "white",
// 导航条文本
"navigationBarTitleText": "电影 « 豆瓣",
// 窗口背景颜色
"backgroundColor": "#fff",
// 窗口前景色
"backgroundTextStyle": "dark",
// 是否开启下拉刷新
"enablePullDownRefresh": true
}
```
### 逻辑层分析
#### 应用程序逻辑`app.js`
`app.js`作为项目主入口文件,用于创建应用程序对象
```javascript
// App函数是一个全局函数,用于创建应用程序对象
App({
// ========== 全局数据对象(可以整个应用程序共享) ==========
globalData: { ... },
// ========== 应用程序全局方法 ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 应用程序启动时触发一次
onLaunch () { ... },
// 当应用程序进入前台显示状态时触发
onShow () { ... },
// 当应用程序进入后台状态时触发
onHide () { ... }
})
```
也就是说,当应用程序启动时会自动执行项目目录下的`app.js`文件。
在`app.js`中通过调用全局`App([option])`方法创建一个应用程序实例。
其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。
属性 | 类型 | 描述 | 触发时机
-----|------|------|---------
onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide
也可以定义任意其他的对象成员(例如:方法和属性),这些成员可以在内部直接使用,或者外部通过获取`app`对象调用:
属性 | 类型 | 描述
-----|------|------
其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,一般用于存放业务逻辑配置,比如:API地址
app.js
```javascript
App({
data1: '123',
data2: { message: 'hello world' },
api: {
list: 'https://github.com/zce/',
detail: 'https://github.com/zce/',
},
foo () {
return 'bar'
}
})
```
other.js
```javascript
// getApp 也是全局函数,可以在任意地方调用,用于获取全局应用程序实例对象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())
```
#### 页面逻辑`[page-name].js`
`[page-name].js`是一个页面的重要组成部分,用于创建页面对象
```javascript
// 获取全局应用程序对象
const app = getApp()
// Page也是一个全局函数,用来创建页面对象
Page({
// ========== 页面数据对象(可以暴露到视图中,完成数据绑定) ==========
data: { ... },
// ========== 页面方法(可以用于抽象一些公共的行为,例如加载数据,也可以用于定义事件处理函数) ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 页面加载触发
onLoad () { ... }
...
})
```
在应用程序执行到当前页面时,会执行当前页面下对应的`[page-name].js`文件。
在`[page-name].js`中通过调用全局`Page([option])`方法创建一个页面实例。
##### `Page([option])`方法`[option]`参数说明
属性 | 类型 | 描述
---- | ---- | ----
data | Object | 页面的初始数据
onLoad | Function | 生命周期函数--监听页面加载
onReady | Function | 生命周期函数--监听页面初次渲染完成
onShow | Function | 生命周期函数--监听页面显示
onHide | Function | 生命周期函数--监听页面隐藏
onUnload | Function | 生命周期函数--监听页面卸载
onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作
其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问
### 视图层分析
#### `[page-name].wxml`页面结构
`WXML(WeiXin Markup Language)`是`MINA框架`设计的一套标签语言,基于`XML`。
结合一些基础组件、事件系统、模板数据绑定,可以构建出页面的结构。
简单来说:wxml ≈ xml + 事件系统 + 模板引擎
例如:
```javascript
// js
Page({
data: {
todos: [
{ text: 'JavaScript', completed: false },
{ text: 'JavaScript+', completed: false },
{ text: 'JavaScript++', completed: false }
]
},
completed (e) { ... }
})
```
```xml
<!-- wxml -->
<view>
<view wx:for="{{ todos }}">
<block wx:if="{{ !item.completed }}">
<text>{{ item.text }}</text>
<button bindtap="completed" data-item-index="{{ index }}"> √ </button>
</block>
</view>
</view>
```
#### `[page-name].wxss`页面样式
`WXSS(WeiXin Style Sheets)`是`MINA框架`设计的一套标签语言,基于`XML`。
`WXSS`用来决定了在`WXML`中定义的组件应该怎么显示。
为了适应广大的前端开发者,我们的`WXSS`具有`CSS`大部分特性。 同时为了更适合开发微信小程序,我们对`CSS`进行了扩充以及修改。
与`CSS`相比我们扩展的特性有:
- 尺寸单位
- 样式导入(CSS也有)
##### 尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) | rem换算rpx (750/20)
---- | ------------------------ | ------------------------ | ------------------------
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | 1rem = 37.5rpx
iPhone6 | 1rpx = 0.5px | 1px = 2rpx | 1rem = 37.5rpx
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx | 1rem = 37.5rpx
> - **建议:** 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
> - **注意:** 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
##### 样式导入
使用`@import`语句可以导入外联样式表,`@import`后跟需要导入的外联样式表的相对路径,用`;`表示语句结束。
```css
@import "common.wxss";
text {
background-color: #ff0;
}
```
##### 选择器
目前只支持如下选择器
选择器 | 样例 | 样例描述
------ | ---- | --------
.class | .intro | 选择所有拥有 class="intro" 的组件
#id | #firstname | 选择拥有 id="firstname" 的组件
element | view | 选择所有 view 组件
element, element | view | checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after | view::after | 在 view 组件后边插入内容
::before | view::before | 在 view 组件前边插入内容
##### 全局样式与局部样式
定义在`app.wxss`中的样式为全局样式,作用于每一个页面。在`[page-name].wxss`文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖`app.wxss`中相同的选择器。
使用微信开发者工具创建小程序项目相关推荐
- 利用微信开发者工具获取小程序指定页面路径!
利用微信开发者工具获取小程序指定页面路径! 小程序不同于app,小程序的每个页面都有页面路径.在使用微信小程序的过程中,很多场景都要使用到小程序的页面路径.比如微信图文中的小程序,公众号菜单中的小程序 ...
- 微信开发者工具测试小程序
使用微信开发者工具测试小程序 1.安装微信开发者工具.VS code工具 2.拉代码到本地,通过git clone 代码仓库路径下载代码 3.用VS code生成dist文件 VS code打开拉取到 ...
- 微信开发者工具开发小程序代码自动热加载/重载/部署
前言 微信小程序基础库 2.12.2 默认情况下,使用微信开发者工具开发小程序时,每次保存代码都会重启微信小程序,即每次都模拟器都返回到首页.有没有办法既更新模拟器中的小程序,又保持 在当前页呢?有的 ...
- 微信小程序开发04 性能优化:借助微信开发者工具提升小程序性能
你好,我是周俊鹏. 前几节课我们分别从架构层(双线程模型).链路层(授权模型).和应用层(自定义组件)三个角度学习了小程序的技术要点.它们能帮你完成一个微信小程序的基本业务逻辑和交互逻辑. 逻辑的第一 ...
- 使用微信开发者工具运行小程序
下载git(以mac为例) 安装 直接在终端运行命令 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/ma ...
- 使用微信开发者工具添加小程序底部导航栏报错
粉丝求助: 示例图: 看了这个页面,很明显这个页面引用的路径都有问题. 解决办法:
- 【小程序】第一个小程序——创建小程序项目
目录 小程序简介 第一个小程序 安装开发者工具 创建小程序项目 小程序简介 1. 小程序与普通网页开发的区别 2. 体验小程序 可使用手机微信(6.7.2 及以上版本)扫码下方小程序码,体验小程序: ...
- uni-app创建小程序项目并运行到微信开发者工具上@令狐张豪
在这直接说步骤 1. 创建uni-app小程序项目 2. 打开项目中的manifest.json文件进行配置 2.1 写入微信小程序AppID 2.2 打开HBuilder X 工具-设置 填写外部w ...
- uni-app—使用vscode创建小程序项目(图文)
输入 vue create -p dcloudio/uni-preset-vue my-project 选择模版 我选择的是默认模版,这样里面什么都没有,可以再安装自己需要的即可 成功之后文件夹就是这 ...
最新文章
- mysql读出varchar乱码_pymssql读取varchar字段中文显示乱码的问题分析
- hdu1247 Hat’s Words
- C3P0-数据库连接池解读
- IBM希望其“裁剪”过的Swift能够引诱你使用BlueMix云
- 设计之路:如何进行软件需求分析?
- linux用while循环输出1到10,Linux Shell系列教程之(十一)Shell while循环 | Linux大学...
- Rxjs的flatMap使用
- php border-style,border-style
- Unreal Engine 4 —— Ghost Mesh Plugin的开发日志
- [C++] - 闭包(closure)
- Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
- Struts迭代器(iterator)遍历List常用的4种例子 - 冯世杰
- Access denied for user ‘‘@‘localhost‘ (using password: YES)报错原因分享
- 小知识:什么是build.prop?
- 计算机界五位巾帼英雄
- 长江存储发表紧急声明:未与美国美光科技进行谈判
- webservice小解
- 弗洛伊德算法(Java)
- java 初始化从句_java中if从句
- 电池比较的黑莓,Android,苹果和Windows智能手机