微信小程序的开发（前端）

前端

快捷键

代码规范快捷键：shift+alt+F

导航栏自定义设置

{
   
    "pages": [
        "index/index",
        "index/index2"
    ],
    "tabBar": {
   
        "custom": true,
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
   
                "pagePath": "index/index",
                "iconPath": "image/icon_component.png",
                "selectedIconPath": "image/icon_component_HL.png",
                "text": "组件"
            },
            {
   
                "pagePath": "index/index2",
                "iconPath": "image/icon_API.png",
                "selectedIconPath": "image/icon_API_HL.png",
                "text": "接口"
            }
        ]
    },
    "window": {
   
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}

以上包含了点击和未点击显示的不同的颜色和图片、顶部样式

去除按钮button边框

.right button{
    margin: 0;
    padding: 0;
    background-color: inherit;
    position: static;
}

上述代码在跳转页面获取id时会出现问题，点击整个页面的任何地方都会跳转，改为以下形式：

.right button{
   
    background-color: inherit;
}
button::after{
    border: none; }

图片的添加

1、在.wxml中添加代码：

    <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{
   {item.mode}}" src="{
   {src}}"></image>
    </view>

2、在.js文件中添加代码：
自己新建文件夹resources添加图片

    data: {
   
        src: '../resources/cat.jpg'
    },

Q：图片不显示，只显示灰色方框
A：
(1) ×
(2)勾选设置中的不校验域名 ×
显示问题：

[渲染层网络层错误] Failed to load local image resource /pages/resources/plane1.jpg
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)
(env: Windows,mp,1.05.2112302; lib: 2.19.4)
解决方法：
1、修改设置-本地设置-调试基础库（未解决）
2、加上wx:if="{undefined{arr.length>0}}“或者wx:if=”{undefined{****}}"
拖延一下加载图片的时间（未解决）
3、图片路径错误，修改路径！

*src的使用：
同文件夹中：eg: "\plane1.jpg"
上一级目录中：planesrc: '../plane1.jpg'
上一级的上一级目录中：planesrc: "../../resources/plane1.jpg"

图片和文字对齐

在图片与文字整体的view中添加css：

align-items:center;

picker等组件中的图片和文字对齐，需要再将其加入view中，然后再此view下设置css：

  display:flex;
  text-align: center;
  align-items:center;

换行符

text标签中加入\n
***（文字）\n

\n

文字超出自动换行：

text-overflow:ellipsis;
word-wrap:break-word;

空格符

空格：\t

多个空格：

<text space="ensp">哈哈啊 哈哈哈（空格是中文字符一半大小）text>
<text space="emsp">哈哈啊 哈哈哈（空格是中文字符大小）text> 
<text space="nbsp">哈哈啊 哈哈哈（空格根据字体设置）text>
<text decode="{
    {true}}">哈哈 啊   哈哈哈（空格是中文字符一半大小）text>
<text decode="{
    {true}}">哈哈 啊   哈哈哈（空格是中文字符大小）text>
<text decode="{
    {true}}">哈哈 啊   哈哈哈（空格根据字体设置）text>

view布局

注：小程序中根元素为page不是body
横向布局：flex-direction:row;
纵向布局：flex-direction:column;

row：从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴

让多个view处在同一行：display: flex;
设置元素在横向上的布局方向：设置 justify-content 属性

1、flex-start：主轴起点对齐(默认值)
2、flex-end：主轴结束点对齐
3、center：在主轴中居中对齐
4、space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
5、space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

设置元素在纵向上的布局方向，设置 align-items 属性

1、stretch 填充整个容器(默认值)
2、flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
3、flex-end 侧轴的终点对齐
4、center 在侧轴中居中对齐
5、baseline 以子元素的第一行文字对齐

子 View 还有个属性 align-self，可覆盖父元素的 align-items 属性，有6个值可选：

auto | flex-start | flex-end | center | baseline | stretch （auto
为继承父元素 align-items 属性，其他和 align-items 一致）

flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：

nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行，第一行在最下面

子 View 的order 属性可控制子元素的排列顺序，默认0，order:-1; 可以排在前面。

设置元素高度为页面整个屏幕高 page{height:100vh;} 。设置高度100%没有效果
vh，是css相对视口高度。1vh=1%*视口高度

view居中显示：margin：0 auto；orflex布局里的justify-content: center;
view文字居右：
1、row-reverse
2、text-align:right;
3、flex-end

边框（view&border）

边框：border: 2px solid #ac9a81;
阴影：box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.15);（x、y坐标、模糊程度、颜色）
圆角（内凹圆角反向圆角)：border-radius: 10rpx;
左半边为圆角border-bottom-left-radius: 10px; border-top-left-radius: 10px;

Text

字体居中：
在字体view下设置：

    display:flex;
    align-items:center; 垂直居中
    justify-content:center; 水平居中

文字大小&颜色

  font-size: 20px;
  color: rgb(54, 45, 45);

列表

wxml文件中：

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

规定下标从1开始而不是从0开始：

案例如下：

修改页面顶部导航栏信息

在.json文件中：

 {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "缴费记录",
    "navigationBarTextStyle": "black"
 }

圆形显示

wxss：

border-radius: 50%;
overflow:hidden;

文本超链接添加方式

在微信小程序中使用：

navigator

进入到需要添加navigator的页面：
案例：
*url必须在app.json中有写明

<navigator url="../applybill/applybill" open-type="navigate"><text>{
  {item. bill}}text>navigator>

判断状态显示不同内容

.wxml文件：

<view class="right" wx:if="{
    {item.bill==0}}">

	<navigator url="../applybill/applybill" open-type="navigate"><text class="zero">申请开票text>navigator>
view>
<view class="right" wx:elif="{
    {item.bill==1}}">
	<text class="one">已申请发票，开票详情请联系0991-0000000text>
view>

获取当前用户的姓名和电话

按钮获取电话：
先进行授权：

时间选择器

eg：

<view class="test">
<picker class="testp" mode="time" value="{
    {time}}"