文章目录

帐号设置
微信开发者工具
- 1、工具的下载与安装
- 2、helloworld项目
小程序目录结构及配置
- 1、目录结构
- 2、全局配置文件app.json
- 3、全局样式文件app.wxss
- 4、小程序生命周期
- 5、全局数据 globalData
WXML语法
- 1、WXML数据绑定
- 2、WXML循环
- 3、WXML判断
- 4、模板页面引用
- - 4.1 页面内使用模板：
  - 例子
  - 4.2 页面外使用模板
  - 例子
  - 4.3 include
  - 例子
WXSS样式
tabBar
- 代码：

帐号设置

官网: https://mp.weixin.qq.com/

申请成功后，回到网站首页，使用注册的邮箱账号和密码（或微信扫码）进入到微信小程序官方控制平台中。

进入微信小程序官方控制平台后，主要为了得到开发所要用到的appid和secret这两项值。这两项值后续需要用到：

需要注意：AppSecret不会明文存储并显示在页面上，需要点击生成按钮在显示弹窗后自行保存并记录，一旦离开当前页面（或刷新）就无法查看已经生成的AppSecret，只能对原先的进行重置。

微信开发者工具

1、工具的下载与安装

工具集成了公众号网页调试和小程序调试两种开发模式，开发者可以编译小程序在电脑上看到模拟器编译效果，此处根据电脑类型自行下载如下：

2、helloworld项目

在桌面上双击运行微信开发者工具，参考以下图示进行项目创建：

创建好项目后显示效果如下：

小程序目录结构及配置

1、目录结构

小程序包含一个描述整体程序（全局）的app和多个描述各自（局部）页面的page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑-小程序入口文件
app.json	是	小程序公共配置文件
app.wxss	否	小程序公共样式表

一个小程序page页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

2、全局配置文件app.json

参考网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json文件用来对微信小程序进行全局配置的，设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。

app.json由于是json文件，所以其中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一定不能有逗号。

常用的全局配置：

pages：注册小程序的页面路径列表

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

window：全局的默认窗口表现

用于设置小程序的状态栏、导航条、标题、窗口背景色

tabBar：小程序底部或顶部菜单定义（换句话说，小程序的菜单是通过json配置来实现的）
networkTimeout：小程序网络请求超时时间设置
usingComponents：自定义组件配置

app.json

{"pages": ["pages/index/index","pages/fen/fen","pages/car/car","pages/mine/mine"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "每日优鲜","navigationBarTextStyle": "black","enablePullDownRefresh":true},"tabBar": {"color":"#000","selectedColor": "#ff0000","list": [{"pagePath": "pages/index/index","text": "首页","iconPath":"static/img/index1.png","selectedIconPath": "static/img/index2.png"},{"pagePath": "pages/fen/fen","text": "分类","iconPath":"static/img/fen1.png","selectedIconPath": "static/img/fen2.png"},{"pagePath": "pages/car/car","text": "购物车","iconPath":"static/img/car1.png","selectedIconPath": "static/img/car2.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath":"static/img/mine1.png","selectedIconPath": "static/img/mine2.png"}]},"style": "v2","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

3、全局样式文件app.wxss

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

/**app.wxss**/
/* app.wxss 全局css样式*/
/* 引入公共css */
/* @import '/static/css/common.wxss'; */
page{width: 750rpx;font-size: 24rpx;background:deeppink
}

4、小程序生命周期

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
// 注册整个小程序实例对象
// 必须调用且只能调用一次
App({// 整个小程序得生命周期函数onLaunch() {console.log('监听小程序初始化')},onShow(){console.log('监听小程序启动或切前台。')},onHide(){console.log('监听小程序切后台。')},globalData: {nameArr: ['张文静','岳小慧','宋江燕']}
})

5、全局数据 globalData

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

在app.js 文件中，定义globalData 属性，该属性中存放的数据在每个页面都可以获取和修改。

// 在app.js 中定义全局数据
globalData: {nameArr: ['张文静','岳小慧','宋江燕']}// 在 index.js 中获取
const app = getApp();
onLoad: function (options) {console.log(app) //获取 App 实例，并获取全局变量数据 globalData},
handleFn(){app.globalData.nameArr.push('逯鑫') //可以在事件中修改 globalData全局数据
}

WXML语法

WXML：页面的视图结构文件。简单来说，其是基于html的基础之上，小程序框架自己设计的一套标记语言。使用这套标记语言，结合JS逻辑部分、样式部分（WXSS），可以允许开发者构建出页面的效果。

注意点：该语言标签严格要求，标签有开始，必须也有结束。

1、WXML数据绑定

a. 页面中的数据都是来自于页面的逻辑文件（js文件）的data属性

例如，我们也在page/index/index.js文件中新增一个数据“msg”，其值是“HTML5”。则如下：

b. 数据可以在页面结构文件（wxml文件）中展示，例如将刚才index页面的msg数据在index.wxml中展示输出（类似于vue的插值表达式）

<text class="user-motto">{{msg}}</text>

c. 使用 setData 方法来对数据进行修改。在使用时注意this关键词指向的问题，因为这个方法是对象实例里的方法。例如，假设需要msg数据在页面加载完成后5秒钟将值修改为“H5”，则代码如下：

针对数据的修改一般写在页面的生命周期函数中。

语法：

this.setData({msg: "H5"
});

2、WXML循环

**语法：**其循环的实现与vue及其相似，也是通过标签的属性来实现循环的。其属性如下：

wx:for：该属性表示循环，其属性值是要循环的数据，默认下标名为 index，当前项为 item
wx:key：使用wx:for 渲染列表，必须循环体的唯一标识符，建议可以使用数组每一项得id。
wx:for-index：（可选）用于自定义索引变量名，默认值是index
wx:for-item：（可选）用于自定义循环到的元素的变量名，默认值是item

关于新建page的操作提示：

在pages目录下新建一个空的文件夹

右键新建好的空的文件夹，选择菜单中的“新建page”

输入页面的名称，回车即可生成page需要的四个文件及其初始化的内容

根据需要决定是否要设置页面为默认页面（在app.json文件中修改新建页面的顺序）

定义一个数据源，稍后演示循环操作：

data: {users: ['张三', '李四', '王五'],obj: [{id: 1,user: 'zhangsan'},{id: 2,user: 'lisi'},{id: 3,user: 'wangwu'}]
},

参考代码：

<!--pages/wxfor/wxfor.wxml-->
<text>pages/wxfor/wxfor.wxml</text><!-- 在wxml里面不用div，div可以用view标签替代 -->
<!-- 使用默认的索引和元素变量循环 -->
<view wx:for="{{users}}" wx:key="index">{{index}} - {{item}}
</view><!-- 使用自定义的索引和元素变量循环 -->
<view wx:for="{{users}}" wx:for-index="key" wx:for-item="val" wx:key="key">{{key}} - {{val}}
</view><!-- 循环数组对象的操作 -->
<view wx:for="{{obj}}" wx:key="index">{{item.id}} - {{item.user}}
</view>

3、WXML判断

语法：与vue一样，小程序中的判断也是通过特定的属性来实现的。属性是：wx:if、wx:elif、wx:else。

例如，有以下的数据源：

data: {age: 19
}

在视图结构代码中依据是否成年的规则去判定age是否成年了：

<!--pages/wxif/wxif.wxml-->
<text>pages/wxif/wxif.wxml</text><view wx:if="{{age > 18}}">成年了，可以去蹦迪了
</view><view wx:elif="{{age == 18}}">刚好成年，不建议现在去蹦迪
</view><view wx:else>未成年，回去写作业去
</view>

4、模板页面引用

WXML提供模板（template）可以在模板中定义代码片段，然后在不同的地方调用。
使用 name 属性，作为模板的名字。然后在内定义代码片段，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
WXML提供两种文件引用方式：import（高级）和include
import：有点类似以于二阶段，可以把一些常用自定义函数，写到一个文件中，在用的时候可以导入进来，然后再去调用里面的特定的函数。（按需使用）
include：将目标文件中所有的代码（除了template标签段、wxs标签段）统统在引入的位置直接用（直接使用）

4.1 页面内使用模板：

当前页面内定义模板，并在当前页面使用，数据item 为当前页js 中定义的数据。

   <!-- 定义模板 --><template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template><!-- 使用模板 --><template is="msgItem" data="{{...item}}"/><!-- js -->Page({data:{item: {index: 0,msg: '我是模板',time: '2016-09-15'}},

例子

4.2 页面外使用模板

把模板定义到外部，然后多个页面间可以共用使用定义的模板
import可以在当前文件中使用目标文件定义的template（代码区块[标签]，可以有多个）。

语法：

在pages 目录下新建页面temp，其代码如下：

<!--pages/temp/temp.wxml-->
<view><template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template>
</view>

在其他页面如首页中引入模板temp，并使用模板，数据item1为使用页数据（如首页）

    <!-- 引入模板 --><import src="../temp/temp.wxml"/><!-- 使用模板 --><template is="msgItem" data="{{...item1}}"/>

例子

注意事项：

import的标签使用可以存在套娃行为，也就是说可以允许出现以下情况：在C文件中importB文件，在B文件中importA文件
import在套娃的时候需要注意，其使用template存在作用域的概念的。import导入，在使用时只能使用导入的目标文件的template，不能使用导入文件中的导入的目标文件的template。（不允许隔代使用）

4.3 include

include可以将目标文件除了<template/> <wxs/>外的整个代码引入，相当于是拷贝到include位置。

注意：只能引入静态html代码，如果代码中涉及data中得变量，需要在引入到得当前页面data中重新定义该变量。

语法：

在pages 中新建 temp1页面

<!--pages/temp1/temp1.wxml-->
<view class="box"><view wx:for='{{fruitArr}}' wx:key='index'>{{item}}</view>
</view>

2.在使用的页面中引入模板：

<!-- 使用include 引入模板 -->
<include src="../temp1/temp1.wxml" />

例子

小结：

include形式不支持对目标文件的template和wxs区块的解析
include引入即使用，import在引入后还需要再去单独使用

WXSS样式

WXSS是一套样式语言，用于描述WXML的组件样式（有点CSS描述HTML样式的感觉）。

为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。例如：

新增了尺寸单位
- WXSS在底层支持新的尺寸单位rpx，可以根据屏幕宽度进行自适应，响应式尺寸单位
- 小程序中全屏尺寸数值是 : 750rpx
- 与px的换算关系：

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

提供了全局的样式和局部样式
- 定义在app.wxss中的样式为全局样式，作用于每一个页面
- 在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器
此外WXSS仅支持部分CSS选择器，目前支持的选择器有：

选择器	样例	样例描述
.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组件前边插入内容

单位 rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。在 iPhone6 上，屏幕宽度为375px，1rpx = 0.5px = 1像素，开发建议用 iPhone6 作为视觉稿的标准。

ps设置375。1px相当于2rpx
ps设置750。1px相当于1rpx

tabBar

文档地址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

tabBar就是小程序底部的导航菜单，小程序的tabBar使用比较简单，只需要在全局配置文件app.json中加上下面的配置即可，参考代码如下：

{"tabBar": {"color": "color","selectedColor": "selectedColor","list": [{"pagePath": "pagePath","iconPath": "iconPath","selectedIconPath": "selectedIconPath","text": "text"},{"pagePath": "pagePath","iconPath": "iconPath","selectedIconPath": "selectedIconPath","text": "text"},]}
}

参考配置实例：

{"tabBar": {"color": "#C0C0C0","selectedColor": "#000000","backgroundColor": "#FFFFFF","list": [{"pagePath": "pages/include/include","text": "导入","iconPath": "./assets/images/more.png","selectedIconPath": "./assets/images/more-active.png"},{"pagePath": "pages/index/index","text": "首页","iconPath": "./assets/images/cookbook.png","selectedIconPath": "./assets/images/cookbook-active.png"}]}
}

注意点：

pages数组中的默认页面（第一个元素）一定要出现在tabbar配置的list数组中，如果没有则底部菜单是不显示的；
如果默认页面在菜单的list数组中，但是不是list数组的一个元素，那么默认页面在第一个元素，那个菜单就会被默认选中；
正常来讲，pages数组中的第一个元素（页面），即菜单list数组中的第一个栏目；

代码：

[小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar相关推荐

微信小程序微信开发者工具常用快捷键（含MAC OS和Windows）以及各种设置
微信小程序微信开发者工具常用快捷键(含MAC OS和Windows)以及各种设置最常用的快捷键: 快捷键(含MAC OS和Windows) 设置页打开方式通用设置外观设置快捷键设置编辑设置 ...
微信小程序——微信开发者工具添加less插件
1.下载插件访问vscode-easy-less 目前更新到1.7.3,点击easy-less-1.7.3.vsix进行下载 2.安装插件 (1)打开微信开发者工具,按下图操作 (2)选择刚刚下载好 ...
小程序——微信开发者工具设置保存后实现代码自动格式化
1.手动Ctrl+Shift+Alt+P 打开命令面板,点击首选项:打开设置里面的代码如下: "editor.fontFamily": "Consolas, 'Cou ...
微信小程序——微信开发者工具设置保存后实现自动格式化
操作步骤如下: 1.打开开发者工具--设置--编辑器设置 2.更多及工作区的编辑器设置 3.点击右上角文件图标 4.setting.json文件配置这是微信开发者工具的初始配置: {"ed ...
微信小程序之开发者工具下载及使用
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 找到下载----选择稳定版本-选择windows64 A ...
微信小程序零基础入门_第一章小程序和开发者工具的介绍
第一章小程序和开发者工具的基本介绍 1.1 小程序的开发工具微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
微信开发者工具下载与简单使用
微信开发者工具下载地址:官方地址百度搜索:微信公众平台或者点这里有账号直接微信扫码登录就可以账号点击立即注册->选择小程序(需要开发小程序的情况下) 填写信息后注册提交,返回上一页面扫码登录 ...
微信开发者工具下载安装
微信开发者工具稳定版下载地址 1.选择好对应需要的版本 2.下载好了双击安装 3.安装好了,打开,安装结束啦,点击添加小程序 4.项目文件 pages 存放所有小程序的页面 utils 存放工具性 ...

[小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar