【经验分享】万字零基础微信前端开发总结

微信前端开发总结

链接可直接跳转官方文档,方便查阅.项目开发总结在这里:项目开发
学习永无止境，励志当一个独当一面的网络工程师，期待你的关注！
哔哩哔哩：王菠萝的多样空间，会同步更新视频教程，可联合进行学习，效率更佳
本文的md文件可在公众号：王菠萝的多样空间，回复“万字零基础微信前端开发总结”，自行下载。

 

1.微信小程序介绍

微信小程序，简称小程序，英文名Mini Program ，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用

1.1.为什么选择微信小程序

1.微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户.
2.推广app 或公众号的成本太高。
3.开发适配成本低。
4.容易小规模试错，然后快速迭代。
5.跨平台。

1.2.疯狂的微信小程序

1.微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万
2.信息传达数达到450亿，较去年增长18%;视频通话4.1亿次,增长100%
3.小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次,创造出了5000亿+的商业价值

1.3.其他的小程序平台

1.支付宝小程序
2.百度小程序
3.QQ小程序
4.今日头条+抖音小程序

1.4.优秀的第三方小程序

拼多多
滴滴出行
欢乐斗地主
智行火车票
唯品会

2 环境准备

2.1.注册账号

注册网站:点击跳转

2.2.获取APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后,登录，然后获取APPID。

3.第一个小程序

3.1.扫码登陆小程序开发者工具

3.2.新建小程序项目

3.3.代码的初始化

删除日志页面,json,文件
修改标题
app.wxss清空 app.js清空,wx-app
index默认样式清空
index 代码清空,wx-Page
设置页面首页

3.4.搭建小程序项目

填入自己的appid

3.5.搭建目录结构

|目录名|作用
|–|–|–|
styles|存放公共样式
components|存放组件
lib|存放第三方库
utils|自己的帮助库
request|自己的接口帮助库

3.6.搭建项目的页面

页面名称	名称
首页	index
分类页面	category
商品列表页面	goods_list
商品详情页面	goods_detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
结算页面	pay

3.7.引入字体图标

1.打开阿里巴巴字体图标网站
2.选择的图标
3.添加至项目
4.下载到本地
5.将样式文件由css修改为wxss
6.小程序中引入,在app.wxml设置

@import "./styles/iconfont.wxss";//复制代码的文件路径

图标的引用

<view>首页
    <text class="iconfont icon-shoucang"></text>//样式名,图标名
</view>

3.8.搭建项目tabbar结构

基础写过.
安装插件后tabbar按下tab快速创建

3.9.初始化样式

小程序不支持通配符 ‘*’
page{p0+m0+bsz}
可快速写出代码

4.小程序配置文件

4.1.全局配置 app.json

4.1.1.tabBar

样式需要和tabBar平级使用

4.2.页面配置 page.json

这里的page.json其实用来表示页面目录下的 page.json这类和小程序页面相关的配置。开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/ white
navigationBarTitleText	string		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉loading的样式，仅支持dark/ light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见Page.onReachBottom
disableScroll	Boolean	false	设置为true则页面整体不能上下滚动;只在页面配置中有效，无法在app.json中设置该项

4.3.sitemap 配置-了解即可

5.模板语法

WXML (WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

5.1.数据绑定

5.1.1.普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

5.1.2.组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

5.1.3.bool控制属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

5.2.运算

5.2.1 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

5.2.2.算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

5.2.3.逻辑判断

<view wx:if="{{length > 5}}"> </view>

5.2.4.字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

5.3.列表渲染

5.3.1.wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表

	<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
	  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
	    <view wx:if="{{i <= j}}">
	      {{i}} * {{j}} = {{i * j}}z
	    </view>
	  </view>
	</view>

5.4.block wx:for

渲染一个包含多节点的结构块block最终不会变成真正的dom元素

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

5.5.条件渲染

5.5.1.wx:if

在框架中，使用 wx:if=“” 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

5.5.2.block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个
标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

6.数据绑定

小程序中绑定事件，通过bind关键字来实现。如bindtap bindinputbindchange等不同的组件支持不同的事件,具体看组件的说明即可。

6.1.特别注意

1.绑定事件时不能带参数不能带括号以下为错误写法

<input bindinput="handleInput(100)"/>

2.事件传值通过标签自定义属性的方式和value

<input bindinput="handleInput" data-item="100"/>

3.事件触发时获取数据

handleInput : function(e) {/ / {item :100}
console.log(e.currentTarget.dataset)
//输入框的值
console.log(e.detail.value);}

7.样式绑定

wXSS( weiXin Style Sheets )是一套样式语言，用于描述WXML的组件样式与CSS相比，WXSS扩展的特性有:
:响应式长度单位rpx
:样式导入

7.1.尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px =1物理像素

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

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

使用步骤:
1.确定设计稿宽度pageWidth
2.计算比例750rpx = pagewidth px ,因此1px=750rpx/pagewidth 。3.在less文件中，只要把设计稿中的 px=>750/pagewidth rpx即可。

7.2.样式导入

wxss中直接就支持，样式导入功能。也可以和less中的导入混用。 使用Cimport语句可以导入外联样式表，只支持相对路径。示例代码:

/*创建的文件夹里面创建一个样式文件.*/
view{
  color: aqua;
}

@import "../../styles/common.wxss"//应用

7.3.选择器

特别需要注意的是小程序不支持通配符*因此以下代码无效!

*{
margin:0;padding:0;
box-sizing:border-box;
}

目前支持的选择器有:

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择所有文档的view组件和所有的checkbox组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view: :after	在view组件后边插入内容
::before	view :: before	在view组件前边插入内容

7.4.小程序中使用less

原生小程序不支持less ，其他基于小程序的框架大体都支持，如wepy ,mpvue , taro等。但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现
1.编辑器是vscode
2.安装插件easy less
3.安装这些几乎够用

3.在vs code的设置中加入如下，配置

"less.compile": {
        "outExt": ".wxss"// false => DON'T output .css files (overridable per-file, see below)
    },

4.在要编写样式的地方，新建less 文件，如index.less ,然后正常编辑即可。

8.常见组件

重点讲解小程序中常用的布局组件
view, text ,rich-text,button,image,navigator,icon, swiper,radio,checkbox。等

8.1.2.view

代替原来的div标签

<view hover-class="h-class">点我试试</view>

8.1.3.text

1.文本标签
2.只能嵌套text
3.长按文字可以复制(只有该标签有这个功能)
4.可以对空格回车进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<text user-select="false" decode>text&nbsp;123</text>

<text selectable="{ifalse}}" decode="{{false}}">普8nbsp;通
</text>

8.2.image

image存在默认宽度和高度320 * 240
1.图片标签，image组件默认宽度320px、高度240px
2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	string	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

8.2.1.图片像素的计算

先找出来原图的宽度和高度等比例 给swiper 定 宽度和高度 原图的宽度和高度
1125 * 352 px
swiper 宽度/ swiper 高度= 原图的宽度 / 原图的高度
swiper 高度 swiper宽度 * 原图的高度 / 原图的宽度
height: 100vw * 352 /1125
自动计算calc(100vw * 352 /1125)

mode有效值:
mode有13种模式，其中4种是缩放模式，9种是裁剪模式。

8.2.2.模式说明

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

8.3.swiper

滑块视图容器
swiper高度无法实现由内容撑开
swiper标签 存在默认样式
1 width 100%
2 height 150px

微信内置轮播图组件

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0,0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否循环轮播

8.3.1.swiper-item

滑块
默认高度和宽度都为100%

8.4.navigation

导航组件，类似超链接标签
0 块级元素默认会换行
可以直接加宽度和高度

属性名	类型	默认值	说明
target	string	self	要跳转到当前的小程序还是其他的小程序的页面,可选值self/miniProgram
url	string		要跳转的页面路径 绝对路径相对路径
open-type	string	navigate	跳转方式

8.4.2.open-type 有效值

值	说明
navigate	默认值 保留当前页面,跳转到应用内的某个页面,但是不能跳到tabbar页面
redirect	关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面
switchtab	跳转到tabbar页面,并关闭其他所有非tabbar页面
relaunch	关闭所有页面,打开到应用内的某个页面

8.5.rich.text

富文本标签 可以将字符串解析成对应标签，类似vue中v-html功能

html: [{
      //1div标签name属性来指定
      name: "div",
      // 2标签上有哪些属性
      attrs: {
        //标签上的属性class style
        class: "my_ div",
        style: "color:red;"
      },
      //3子节点children要接收的数据类型和nodes第二种渲染方式的数据类型一致
      children: [{
        name: "p",
        attrs: {},
        //放文本
        children: [{
          type: "text",
          text: "hello"
        }]
      }]
    }]

8.5.2.nodes属性

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text*

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

8.6.1.button

<button
type="default"
size="{{defaultsize]}"
loading="{floading}}"
plain="{{plain}]">
default
</button>

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标	1.0.0
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件	1.0.0
open-type	string		否	微信开放能力	1.1.0

size 的合法值

值	说明	最低版本
default	默认大小
mini	小尺寸

这里是引用
其他查询官网

8.6.2.open-type的 contact的实现流程

1.将小程序的appid由测试号改为自己的appid
2.登录微信小程序官网，添加客服–微信
3.为了方便演示，老师自己准备了两个账号
1.普通用户A
2.客服-微信B
4.就是干!

8.7.icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色,同css的color

代码:
js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      ' success ', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', ' download', 'search', 'clear'
    ],
    iconColor: [
      'red ', 'orange ', 'yellow', 'green', 'rgb(0,255,255)', 'blue ', 'purple'],
  }
})

wxml

<view class="group">
<block wx:for="{ficonsize]}">
<icon type="success" size="{{item}}"/></block>
</view>
<view class="group">
<block wx:for="{ficonType}}">
<icon type="ifitem}}" size="40"/></block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/></block>
</view>

8.8.radio

可以通过color属性来修改颜色

需要搭配radio-group一起使用

<radio-group bindchange="handlechange">
  <radio value="1">男</radio>
  <radio value="0">女</radio>
</radio-group>
<view>性别是{{gender}}</view>

8.9.checkbox

可以通过color属性来修改颜色

需要搭配checkbox-group一起使用

<radio-group bindchange="handlechange">
  <radio value="1">男</radio>
  <radio value="0">女</radio>
</radio-group>
<view>性别是{{gender}}</view>

9.自定义组件

类似vue或者react中的自定义组件
小程序允许我们使用自定义组件的方式来构建页面

9.1.1自定义组件操作

9.1.2创建自定义组件

类似于页面，一个自定义组件由json,wxml ,wxss, js4个文件组成

可以在微信开发者工具中快速创建组件的文件结构

9.1.3.声明组件

首先需要在组件的json文件中进行自定义组件声明

myHeader.json

{
"component" : true}

9.1.4.编辑组件

同时，还要在组件的 wxml文件中编写组件模板，在 wxss文件中加入组件样式slot表示插槽,类似vue中的slot

MyHeader.wxml

<! --这是自定义组件的内部WXML结构--><view class="inner ">
{{innerText}}
<slot></slot>
</view>

在组件的 wxss 文件中编写样式

注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

myHead.Wxss

/*这里的样式只应用于这个自定义组件*/
.inner {
color: red;
}

9.1.5.注册组件

在组件的js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法

MyHeader.js

Component({properties: {
//这里定义了innerText属性，属性值可以在组件使用时指定innerText: {
//期望要的数据是 string类型type: String,
员
value: 'default value ' ,}
},
data: {
//这里是一些组件内部数据someData: 0
},
methods : {
//这里是一个自定义方法
customMethod: function(0}}
})

9.2.声明引入自定义组件

首先要在页面的json文件中进行引入声明.还要提供对应的组件名和组件路径

index.wxml

"usingComponents": {
      "tabs":"../../componets/tabs/tabs"

9.3.页面中使用自定义组件

<view>
<!--以下是对一个自定义组件的引用-->
<my-header inner-text="Some text">
<view>用来替代slot的</view>
</my-header>
</view>

9.5.定义段与示例方法

Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

9.5.2.标题激活选中

深拷贝

let tabs=JSON.parse(JSON.stringify(this.data.tabs));

[].forEach 遍历数组 遍历数组的时候 修改了V 也会导致源数组被改变

hanldeItemTap(e) {
      const { index } = e.currentTarget.dataset;
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      let { tabs } = this.data;
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
      this.setData({
        tabs
      })

9.6.组件-自定义组件传参

1.父组件通过属性的方式给子组件传递参数
2.子组件通过事件的方式向父组件传递参数
3.页面.js文件中 存放事件回调函数的时候 存放在data同层级下!!!
4.组件.js文件中 存放事件回调函数的时候 必须要存放在methods中!!!

9.6.2.过程

1.父组件把数据{{tabs}}传递到子组件的tabItems属性中
2.父组件监听onMyTab事件
3.子组件触发bindmytap中的mytap事件 1:自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象
4.父->子动态传值this.selectComponent( “#tabs”);

父组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
内容-这里可以放插槽
</tabs>
// page.js
data: {tabs:[
{name :"体验问题"},
{name : "商品、商家投诉"}]
},
onMyTab(e){
console.log(e.detail;},

子组件代码

/ /com .wxml
<view class="tabs ">
<view class="tab_title" >
<block wx:for="{itabItems}" wx :key="ifitem}}">
<view bindtap="handleItemActive" data-index="[{index]}}"">{[item.name}}</view></block>
</view>
<view class="tab_content"><slot></slot>
</view>
</view>
// com.js
component(
{
properties: {
tabItems:
{type:Array,value:[]
}
},
/**
* 组件的初始数据*/
data: {
},
/**
*组件的方法列表*/
methods: {
handleItemActive(e){
this.triggerEvent( 'mytap ' , 'haha ' );}
}

9.7.小结

1.标签名 是 中划线的方式
2.属性的方式 也是要中划线的方式
3.其他情况可以使用驼峰命名
1:组件的文件名如myHeader.js的等
2:组件内的要接收的属性名如innerText
4.更多。。

10.小程序生命周期

分为应用生命周期和页面生命周期
关于小程序前后的定义和小程序的运行机制，请参考运行章节

10.1.应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function	unction	否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。
1.应用第二次启动的就会触发的事件
在应用第一次启动的时候,获取用户的个人信息
2.对应用的数据或页面效果 重置
3.应用 被隐藏了
暂停或者清除定时器
4.应用的代码发生了报错的时候 就会触发
在应用发生代码报错的时候,收集用户的错误信息,通过异步请求,将错误的信息发送后台去
5.页面找不到就会触发
应用第一次启动的时候,如果找不到第一个入口页面,才会触发
如果页面不存在了,通过js的方式来重新跳转页面,重新跳到第二个页面

10.2.页面生命周期

属性	类型	说明
data	object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHid	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见响应显示区域变化
onTabltemTap	function	当前是tab页时，点击 tab时触发

onTabltemTap
1.必须要求当前页面,也是tabbar页面.
2.点击的自己的tab item的时候才触发

10.3.页面生命周期图解

11.定义主题样式

app.wxml里面定义主题颜色

page{
  --themeColor:#ff2d4a;
  font-size:28rpx;
}

引用

view{
  color:var(--themeColor);
}

11.2.全局页面配置

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#eb4450",
        "navigationBarTitleText": "黑马优购",
        "navigationBarTextStyle": "white"

12.网络请求

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

1