微信小程序从新手到入门_visual studio code 运行 微信小程序

简介

微信小程序官网开发文档
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

其他小程序

• 支付宝小程序
• 百度小程序
• qq小程序
• 今日头条+抖音小程序

环境准备

1. 申请帐号，小程序注册
2. 安装微信开发者工具
3. 开发微信小程序
   使用Visual Studio Code开发微信小程序，微信开发者工具负责预览

第一个微信小程序

打开微信开发者工具

第一次登录微信开发者工具是需要微信扫码登录的

新建小程序项目

选择测试账号进行小程序的开发


到此，微信小程序创建成功



获取微信小程序昵称成功！

修改appid

在项目的文件目录中找到“project.config.json”这个文件，点击打开，在右侧的代码区域里面找到“appid”，直接修改值，修改成功之后，保存，appid就修改好了

微信开发者工具的介绍

微信官网开发者工具的介绍

小程序的调试

页面样式的调试

页面调试成功，按ctrl+S自动保存编译，模拟器展示调试后的样式与效果

预览

清除缓存

清除本地的缓存和用户数据

修改微信小程序的信息

点击详情按钮，

查看微信小程序在不同的机型下的显示

查看网络状态

新建文件和文件夹

小程序的结构目录

官网介绍
小程序框架
小程序文件结构和传统web对比

通过对比得出，传统web是三层结构，而微信小程序是四层结构，多了一层配置.json

基本的项目目录

小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

全局配置app.json

官网介绍的全局配置

pages:——用于描述当前小程序所有页面路径，让微信客户端知道当前你的小程序页面定义在哪个目录
window:——定义小程序所有页面的顶部背景颜色，文字颜色等

{
  "pages": [
    "pages/index/index",//表示当前页面定义在pages/index的目录下，表示在小程序中是启动页面
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

window的详细介绍

创建文件的快捷方式

（以下方式只在微信开发者工具中有效）


新增页面提示iPage “pages/main/main” has not been registered yet.
在main.js中输入Page，创建Page构造函数

tabbar的配置

tabbar:标签页
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

在小程序目录下app.json中配置

tabBar官网的介绍
tabBar和pages是同级

app.json中配置如下

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor":"#FFFF00"
  },
  "tabBar":{
    "list":[
      {
        "pagePath":"pages/index/index",
        "iconPath":"images/icon_consult.png",
        "text":"首页"
      },
      {
        "pagePath":"pages/test/test",
        "iconPath":"images/icon_invest.png",
        "text":"项目管理"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果如下：

官网介绍

页面配置

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性

官网介绍

修改导航栏标题navigationBarTitleText

效果如下：

sitemap 的配置

官网介绍

view和text的简介

text标签

• 文本标签
• 只能嵌套text
• 长按文字可以复制，只有该标签有这个功能
• 可以对空格回车进行编码
  

数据绑定

在页面.js文件Page函数的data属性里面定义属性和属性值

Page({
  // 页面中显示的数据
  data:{
    msg:'Hello WiXIN',
    num:1000,
    flag:true,
    person:{
      age:73,
      height:145,
      weight:160,
      name:'富婆'
    },
    isChecked:true
  }
  
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在页面中使用{{属性名}}获取属性值

<!--pages/main/main.wxml-->
<!-- 字符串 -->
<view>{{msg}}</view>
<!-- 数字类型 -->
<view>{{num+1}}</view>
<!-- boolean类型 -->
<view>{{flag}}</view>
<!-- 对象类型 -->
<view>{{person.name}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.age}}</view>
<!-- 在标签的属性中使用 -->
<view data-num="{{person.age}}">12</view>
<!-- 使用boolean类型充当属性,checked.
  字符串和花括号之间一定不要存在空格，否则会导致识别失败
  以下的写法就是错误的示范
   <checkbox checked="   {{isChecked}}"></checkbox>
   无论isChecked是true和false都是显示为选中的状态
-->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

官网介绍

运算

Page({
  data:{
    msg:'Hello'
  }
})
1
2
3
4
5

<view>
  <view>{{msg}}</view>
  <!-- 运算=>表达式 
    1.可以在花括号中加入表达式 --    "语句"
    2.表达式
        指的是一些简单、运算、数字运算、字符串、拼接、逻辑运算
    2.1数字的加减
    2.2字符串拼接
    2.3三元表达式
    3.语句
        3.1复杂的代码段
        3.2 if else
        3.3 switch
        3.4 do while 
        3.5 for
  -->
  <view>{{1+1}}</view>
  <view>{{'1'+'1'}}</view>
  <view>{{11%2==0?'偶数':'奇数'}}</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

官网介绍

数组和列表渲染

官网介绍
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

修改如下：
控制台警告消除

完整代码：

<view>
<!-- 列表渲染
   wx:for="{{数组或者对象}}"
   wx:for-item="循环项的名称"
   wx:for-index="循环项的索引"
   wx:key="唯一的值"用来提高列表渲染的性能
   wx:key 绑定一个普通的字符串的时候，那么这个字符串名称，肯定是循环数组中的对象的唯一属性
   wx:key="*this" 表示你的数组是一个普通的数组，*this表示是循环项
   [1,2,3]
 -->
 <!-- 如不提供 wx:key，会报一个 warning -->
 <!--  -->
    <view wx:for="{{list}}" wx:for-item="a" wx:for-index="i" wx:key="i">
     索引：{{i}}--值{{a.name}}
    </view>
    
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Page({
  data:{
    list:[
      {
        id:0,
        name:'猪八戒'
      },
      {
        id:1,
        name:'沙和尚'
      },
      {
        id:2,
        name:'孙悟空'
      }
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对象属性的渲染

完整代码

<view>
   <!-- 对象循环 
    wx:for="对象" wx:for-item="对象的值" wx:for-index="对象的属性" 
    循环对象的时候最好把item和index的名称都修改一下
    wx:for-item="value" wx:for-index="index"
   -->
   <view wx:for="{{person}}"  wx:key="index">
    属性：{{index}}——
    值:{{item}}
   </view>
</view>
1
2
3
4
5
6
7
8
9
10
11

Page({
  data:{
    list:[
      {
        id:0,
        name:'猪八戒'
      },
      {
        id:1,
        name:'沙和尚'
      },
      {
        id:2,
        name:'孙悟空'
      }
    ],
    person:{
      age:73,
      height:145,
      weight:160,
      name:'富婆'
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

block标签

完整代码

<view>
  <!-- block：
  1.占位符的标签
  2.写代码的时候，可以看到这个标签存在
  3.页面渲染，小程序会把它移除掉 -->
  <block>
    <view>123</view>
  </block>
</view>
1
2
3
4
5
6
7
8
9

条件渲染

官网介绍

<view>
  <!-- 条件渲染
  1. wx:if="{{true/false}}"
  if,else,if else
   wx:if
    wx:elif 
    wx:else
   2 hidden
    2.1在标签上直接加上属性hidden
    2.2 hidden="{{true}}"
  3.使用场景
    3.1在标签不是频繁的切换显示，优先使用 wx:if
      直接把标签从页面结构给移除掉
    3.2在标签频繁的切换显示的时候，优先使用hidden
      通过添加样式的方式来切换显示
      hidden属性不要和样式display一起使用
  -->
  <view>条件渲染</view>
  <view wx:if="{{true}}">123</view>
  <view>隐藏</view>
   <view wx:if="{{false}}">123</view>
   <view>if和else if 和else</view>
   <view wx:if="{{true}}">1</view>
   <view wx:elif="{{false}}">2</view>
   <view wx:else>3</view>
   <view hidden style="display:none">hidden隐藏</view>
   <view hidden="{{false}}">hidden属性</view>
   <view hidden style="display:flex">hidden属性和display一块使用后的结果</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果如下

小程序的事件绑定

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

<!-- 
  1.需要给input标签绑定input事件
  绑定关键字bindinput
  2.获取输入框的值，通过事件源对象来获取
  e.detail.value获取输入框的值
  3.把输入框的值赋值到data当中，不能直接this.data.num=e.detail.value
  正确的写法:
             this.setData({
                num:e.detail.value
               })
 -->
<input type="text"  bindinput="handleInput"/>
<view>{{num}}</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

Page({
  data:{
    num:0
  },
  //输入框的Input事件的执行逻辑
  handleInput(e){
    this.setData({
      num:e.detail.value
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11

自定义属性的绑定

<!-- 
  点击事件bindtap
  无法在小程序当中的事件中直接传参
  通过自定义属性的方式来传递参数
 -->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
1
2
3
4
5
6
7
8

Page({
  data:{
    num:0
  },
  //加减按钮的事件
  handletap(e){
    // console.log(e);
    //获取自定义属性operation
    const operation=e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面如下：
点击+号按钮，数字增加，减号按钮，数字减1

样式WXSS

官网介绍

在index.js中添加如下代码

Page({

});
1
2
3

在index.wxss中添加如下代码

/* 
小程序中不需要主动引入样式文件
需要把页面中某些元素的单位由px改为rpx
当前的设计稿750x
750px=750rpx
1px=1rpx
屏幕宽度改为375px
375px=750rpx
1px=2rpx
1rpx=0.5px
存在一个设计稿宽度414或者未知
1设计稿 page存在一个元素宽度100px
2.拿以上的需求去实现不同宽度的页面适配
page px=750rpx
1px=750rpx/page
100px=750rpx*100/page
假设page=375px
利用一个属性calc属性 css和wxss都支持一个属性
750和rpx中间不要留空格
运算符的两边也不要留空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  /* 以下代码写法是错误 */
  /* width: 750rpx*100/375; */
  /*正确的写法 */
  width:calc(750rpx*100/375);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在index.wxml中添加如下代码：

<view>
  rpx
</view>
1
2
3

效果如下：

样式导入

在项目的根目录下新建style文件夹，在style文件夹下面创建style.wxss

view{
  color: aqua;
  font-size:32rpx;
}
1
2
3
4

在项目的demo/demo的路径的文件中引入

/* 引入代码是通过@import
路径只能写相对路径
 */
 @import '../../style/style.wxss';
1
2
3
4

<view>test</view>
1

效果如下：

选择器

小程序不支持通配符*

 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
1
2
3
4
5

nth-child(n)  view:nth-child(2) // 选择某个索引的标签
1

选择器介绍

组件

官网介绍

image

由于小程序打包上线的大小限制在2M，所以很多静态资源要放在网络上，图片大小要进行限制，尽量使用网络图片。

官网介绍

完整代码

<!-- image图片标签
src:指定要加载的图片的路径
图片存在默认的宽度和高度320*240
原图大小为154*148
mode决定图片内容，如何和图片标签宽高做适配
1.scaleToFill:默认值，缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素.
aspectFit:保持宽高比，缩放模式，确保图片的长边能完全显示出来，页面轮播图常用
aspectFill	缩放模式，保持纵横比缩放图片，保证图片的短边能完全显示出来，少用
widthFix	以前web图片的宽度指定之后，高度会自动按比例来调整 ，常用
bottom:类似以前的web的background-position
2.小程序当中的图片直接就支持懒加载 lazy-load
lazy-load 会自己判断，当图片出现在视口上下三屏的高度之内的时候，自己开始加载图片
 -->
<image src="https://ae01.alicdn.com/kf/H6fc552e2e37f481eab87ed382c435744r.jpg" mode="bottom" lazy-load/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Page({

})
1
2
3

image{
  box-sizing: border-box;
  border: 1px solid red;
  width: 300px;
  height: 500px;  
}
1
2
3
4
5
6

效果如下:

swiper

官网介绍

轮播图

全部代码：

<!-- 1.轮播图外层容器swiper
      2.每一个轮播项swiper-item
      3.swiper标签存在默认样式
         3.1	width:100%
         3.2	height:150px
         image存在默认宽度和高度320*240
         swiper高度无法实现由内容撑开
      4.先找出来原图的宽度和高度，等比例给swiper定宽度和高度
      原图的宽度和高度1125*352
      swiper 宽度/swiper高度=原图的宽度/原图的高度
      swiper 宽度=swiper高度*原图的宽度/原图的高度
      height:100vw*352/1125
       autoplay:自动轮播
       interval:修改轮播时间
        circular:衔接轮播
        indicator-dots：显示面板指示点（索引器，分页器，指示器）
        indicator-color	：指示点颜色（指示器未选择的颜色）
        indicator-active-color:指示点颜色（指示器选择的颜色）
 -->
<swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff9400">
  <swiper-item>
    <image src="http://img.alicdn.com/imgextra/i2/42/O1CN01ARtwr41CBHErSCzQY_!!42-0-luban.jpg" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="https://aecpm.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="https://img.alicdn.com/tps/i4/TB1v2mGIEH1gK0jSZSySuttlpXa.jpg" mode="widthFix"/>
  </swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* pages/swiper/swiper.wxss */
swiper{
   width: 100%;
   height: calc(100vw*352/1125);
}
image{
  width: 100%;
}
1
2
3
4
5
6
7
8

效果如下：

navigator

官网介绍

导航组件类似超链接标签a

<!-- 导航组件navigator
  块级元素，默认会换行，可以直接加宽度和高度
  url:要跳转的页面路径,绝对路径，相对路径
  target要跳转到当前的小程序，还是其他的小程序的页面
  self:默认值，自己小程序的页面
  miniProgram：其他小程序的页面
  open-type	：跳转方式
  navigate:默认值，保留当前页面,跳转到应用内的某个页面，但是不能跳转到tabbar页面
  redirect:关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
  switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面
  reLaunch:关闭所有页面，打开到应用内的某个页面
  navigateBack:关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
  exit:推出小程序，target="miniProgram"时生效
 -->
 <navigator url="/pages/swiper/swiper" open-type="navigate">轮播图页面</navigator>
 <navigator url="/pages/index/index" open-type="switchTab">直接跳转到tabbar页面</navigator>
 <navigator url="/pages/swiper/swiper" open-type="redirect">轮播图页面redirect</navigator>
  <navigator url="/pages/index/index" open-type="reLaunch">relaunch可以直接跳转到tabbar页面</navigator>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

页面效果如下：

rich-text

接收标签字符串

富文本

官网介绍

demo2.wxml中代码

<!-- rich-text富文本标签
node属性来实现
1.接收标签字符串
2.接收对象数组
 -->
 <rich-text class="text" nodes="{{html}}"></rich-text>
1
2
3
4
5
6

demo2.js中代码

// pages/demo2/demo2.js
Page({
  data:{
   html:'<div style="color:hotpink;font-size:32px;font-weight:700;">123</div>'
  }
})
1
2
3
4
5
6

页面效果：

接收对象数组

Page({
  data:{
    html:[
      {
        //div标签 由name属性来指定
        name:"div",
        //标签上的属性 class style
        attrs:{
          class:"my_div",
          style:"color:red;"
        },
        //子节点children 要接收的数据类型和nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:"p",
            attrs:{
             

            },
            children:[
              {
                //放文本
               type:"text",
               text:"hello"
             }
            ]
            
          }
        ]
      }
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!-- rich-text富文本标签
node属性来实现
1.接收标签字符串(最常用的)
2.接收对象数组
 -->
 <rich-text  nodes="{{html}}"></rich-text>
1
2
3
4
5
6

效果如下：

button按钮

样式

<!-- button标签
外观的属性
size:控制按钮的大小，默认值是default,mini 小尺寸
type:控制按钮的颜色，default:灰色，primary:绿色，warn:红色
plain:按钮是否镂空，背景色透明
loading:名称前是否带 loading 图标
 -->
<button>默认按钮</button>
<button size="mini">mini默认按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="warn" plain>plain按钮</button>
<button type="primary" loading>loading按钮</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

开放能力

<!-- button开放能力,open-type 的合法值 -->
<!-- contact 直接打开 客服对话功能，需要在微信小程序的后台配置
share	转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈中
getPhoneNumber	获取当前用户的手机号码信息，结合一个事件来使用，不是企业的小程序账号，没有权限来获取用户的手机号码，绑定一个事件bindgetphonenumber，在事件回调函数中通过参数来获取信息,获取到的信息，已经加密过了，需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了
getUserInfo	获取用户的个人信息,使用方法类似获取用户的手机号码，可以直接获取不存在加密的字段	
launchApp	在小程序当中直接打开app,需要先在app中通过app的某个链接打开小程序，在小程序中再通过这个功能重新打开app。
openSetting	打开小程序内置的授权页面，授权页面只会出现用户曾经点击过的授权
feedback	打开小程序内置的意见反馈页面，只能通过真机调试来打开-->
<button open-type="contact">打开客服会话</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="bindgetphonenumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// pages/demo3/demo3.js
Page({
  //获取用户的手机号码信息
  bindgetphonenumber(e) {
    console.log(e);
  },
  //获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})
1
2
3
4
5
6
7
8
9
10
11

效果如下：

icon标签

官网介绍

<!--pages/demo/demo.wxml-->
<!-- 小程序中的字体图标
type图标的类型
success|success_no_circle|info|warn|waiting|cancel|download|search|clear
size 大小
color 图标的颜色
 -->
<icon type="success" size="23" color="hotpink"></icon>
<icon type="success_no_circle" size="23" color="hotpink"></icon>
<icon type="info" size="23" color="hotpink"></icon>
<icon type="warn" size="23" color="hotpink"></icon>
<icon type="waiting" size="23" color="hotpink"></icon>
<icon type="cancel" size="23" color="hotpink"></icon>
<icon type="download" size="23" color="hotpink"></icon>
<icon type="search" size="23" color="hotpink"></icon>
<icon type="clear" size="23" color="hotpink"></icon>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

显示如下

radio

代码如下：

Page({
  data: {
    gender: ''
  },
  check(e) {
    //获取单选框中的值
    let gender = e.detail.value;
    //把值赋值给data中的数据
    this.setData({
      // gender: gender
      gender
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- radio单选框
1.radio标签必须要和父元素radio-group来使用
2.value选中的复选框的值
3.需要给radio-group绑定change事件
4.需要在页面中显示选中的值
bindchange绑定radio选中事件
color:radio选中的单选按钮颜色
 -->
 <radio-group bindchange="check">
  <radio value="男" color="red">男</radio>
  <radio value="女">女</radio>
 </radio-group>
 <view>您选中的是{{gender}}</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

checkbox复选框

官网介绍

<view>
  <checkbox-group bindchange="handleChange">
    <checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">{{item.name}}</checkbox>
  </checkbox-group>
  <text>选中的水果：{{checkedList}}</text>
</view>
1
2
3
4
5
6

// pages/demo5/demo5.js
Page({
  data:{
    list:[
      {
        id:0,
        name:"
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/80345