nz-微信小程序 | 易学教程

一、微信小程序-全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

1.pages:配置页面路径列表（添加新页面）
在微信开发中工具中自带的编辑器里面为pages数组添加新的路径，微信开发者工具会自动为其创建对应的文件目录。

配置示例：

{
“pages”: [
“pages/index/index”,
“pages/home/home”,
“pages/kind/kind”,
“pages/cart/cart”,
… …
],
}
2.window：配置全局默认窗口表现
用于设置小程序的状态栏、导航条、标题、窗口背景色等。

{
“window”: {
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “逆战”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”,
“enablePullDownRefresh”:“true”,
… …
}
}
3.tabBar：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

color tab上的文字默认颜色，仅支持十六进制颜色
selectedColor tab上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor tab的背景色，仅支持十六进制颜色
borderStyle tabbar上边框的颜色，仅支持 black / white
list tab的列表，详见 list 属性说明，最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象
position tabBar的位置，仅支持 bottom / top
配置示例：

{
“tabBar”: {
“color”:"#ffffff",
“selectedColor”:"#eefefe",
“backgroundColor”:"#adcabc",
“borderStyle”:“black”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”:“icon图片路径”,
“selectedIconPath”:“选中时的图片路径”
},
{
“pagePath”: “pages/cart/index”,
“text”: “购物车”,
“iconPath”:“icon图片路径”,
“selectedIconPath”:“选中时的图片路径”
},
… …
],
“position”:“bottom”
},
}
二、微信小程序-页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

navigationBarBackgroundColor 导航栏背景颜色，如 #000000
navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
navigationBarTitleText 导航栏标题文字内容
backgroundColor 窗口的背景色
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh 是否全局开启下拉刷新。
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为px。
disableScroll 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
配置示例：

{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “微信接口功能演示”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”
… …
}
三、微信小程序-购物车
其中几个主要的功能：

（1）物品请求数据，使用微信小程序request请求，POST方式得到服务器传来的物品数据。
每次请求要想后端传入用户id和物品id才得到的物品数据，每一次请求要判断还有没有数据，有数据则请求成功，没有数据就不请求。

（2）选中和取消选中单个物品，以及数量的加减。

（3）选中或取消选中物品时，总价格要进行加减。
每次触发选择事件，都会触发计算总价的方法。

（4）全选按钮，实现物品的全选。
当用户通过单选选择了所有物品时，“全选按钮”会自动改变为选中样式；当用户通过“全选按钮”选择所有商品的时候，每个商品都应该是选中状态。

（5）计算总价。
任何一次触发该函数，都会重新计算价格，将总价变为0，再进行选中项的价格累加，而不是在原总价上累加或减某一个商品的价格。

三、微信小程序-api的使用
api包括基础，路由，界面，网络，数据缓存，媒体，位置，转发，画布，文件，开放接口，设备等等。
具体使用方法：https://developers.weixin.qq.com/miniprogram/dev/api/

四、微信小程序-组件的使用
微信小程序组件包括视图容器，基础内容，表单组件，导航，媒体组件，地图，画布，开放能力，原生组件说明，无障碍访问，导航栏，页面属性配置节点

来源：CSDN

作者：chhaha_yes

链接：https://blog.csdn.net/chhaha_yes/article/details/104467134

标签

微信小程序

微信页面

移动互联网