【微信小程序】从零开始搭建微信小程序项目

这篇具有很好参考价值的文章主要介绍了【微信小程序】从零开始搭建微信小程序项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注册微信小程序账号

注册账号

建议开发者在准备开发/学习小程序前都应该首先前往微信公众平台注册一个小程序账号。开发者可移步微信公众平台 https://mp.weixin.qq.com ,点击【账号分类】下的【小程序】,在小程序注册页面点击【前往注册】按照要求注册小程序账号。

详细流程请查看官方文档:https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

查看AppID

目前,我们需要打开微信公众平台 https://mp.weixin.qq.com/ 扫码登录小程序管理后台。

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

点击小程序管理后台左侧【开发】,随后在右侧顶部点击【开发设置】,找到页面中的 AppID (小程序ID)。

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

AppID 是非常重要的小程序 ID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID),请开发者妥善保管和保存。

安装微信开发者工具

小程序的开发工具官方名称为:“微信开发者工具”,其中并不包含“小程序”3个字。看来微信的这个 IDE 并不想仅仅只是用来开发小程序。事实上也确实如此,这款开发工具不仅仅可以用来开发小程序,还可以用来调试运行在微信上的网页以及微信小游戏。

现在,微信官方提供了4个不同用途的开发工具版本:

  • 稳定版 ( Stable Build )
  • 预发布版( RC Build )
  • 开发版 ( Nightly Build )
  • 小游戏版 ( Minigame Build )

每个版本下又分别提供了 Windows 64、Windows 32 和 MacOS 三个细分版本。

从稳定性上来说,稳定版 > 预发布版 > 开发版。这里选择下载(稳定版)开发者工具。

微信开发者工具的官方下载地址为:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建第一个项目

开发工具安装完成后,我们来新建第一个小程序项目。双击打开微信开发者工具,如果你是第一次打开或者长时间未打开微信开发者工具,开发工具都会弹出一个二维码,请使用微信“扫一扫”扫描该二维码。进入微信开发者工具后你将看到下图的微信开发者工具首选页面:

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

选择第一个【小程序】,然后在右侧点击 + ,这将打开一个新建小程序的面板,如图所示:

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

面板中需要填入的选项有:

  1. 【项目名称】建议使用英文,如 HelloWorld,中文可能会引起一些未知错误。注意,项目名称不可以重名。
  2. 【目录】选择一个空的文件夹用于存放小程序的项目文件。
  3. 【AppID】将前面获取的 AppID 在此处填入 AppID 即可。
  4. 【开发模式】请选择“小程序”。
  5. 【后端服务】选择“不使用云服务”。”云服务“和”云开发“均是腾讯提供的一种快速服务端解决方案,并不是我们开发小程序服务端的必备选择。
  6. 【模板选择】选择“不使用模板”。

如果你没有申请 AppID,在第二步中,你也可以点击【AppID】下的【测试号】这个选项。小程序将为你自动生成一个用于测试的 AppID。这里不建议使用测试的 AppID,因为它也有许多的限制和缺陷,仅适用于快速查看/体验小程序。

成功创建项目后,将进入到如图所示的开发者工具主界面中。

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

使用第三方组件库

安装Vant组件库

步骤一 通过 npm 安装

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

步骤三 构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,构建完成后,即可引入组件。
微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

使用 Vant 组件

引入组件

Button 组件为例,只需要在app.jsonindex.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

使用组件

引入组件后,可以在 wxml 中直接使用组件

支持defaultprimaryinfowarningdanger五种类型,默认为default

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果如图所示:

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

添加标签页面

在 app.json 中添加页面路径,并保存文件,即可在 pages 目录下自动生成对应的页面文件。

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

设置小程序底部 tabBar 栏

添加 tabBar 图标

在阿里图标库 https://www.iconfont.cn/ 下载项目需要的图标,保存在 static 文件夹下

微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

修改配置

修改 app.json 文件添加 tabBar 相关配置
微信开发者工具 稳定版 预发布版 开发版 小游戏版,前端开发,微信小程序,小程序

"tabBar": {
    "color": "#666666",
    "selectedColor": "#1677ff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tarbar-icon/index.png",
      "selectedIconPath": "static/tarbar-icon/index_active.png"
    }, {
      "pagePath": "pages/page1/index",
      "text": "第一页",
      "iconPath": "static/tarbar-icon/page1.png",
      "selectedIconPath": "static/tarbar-icon/page1_active.png"
    }, {
      "pagePath": "pages/page2/index",
      "text": "第二页",
      "iconPath": "static/tarbar-icon/page2.png",
      "selectedIconPath": "static/tarbar-icon/page2_active.png"
    }, {
      "pagePath": "pages/page3/index",
      "text": "第三页",
      "iconPath": "static/tarbar-icon/page3.png",
      "selectedIconPath": "static/tarbar-icon/page3_active.png"
    }]
  }

自定义 tabBar

基础库 2.5.0 开始支持,低版本需做兼容处理。

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。

在自定义 tabBar 模式下

  • 为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
  • 此时需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。
  • 与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效。
  • 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。

注意:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。可参考底部的代码示例。

配置信息

  • app.json 中的 tabBar 项指定 custom 字段为 true,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
"tabBar": {
    "custom": true,
}

添加 tabBar 代码文件

项目根目录下添加入口文件:

注意:命名不可随意改动

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

编写 tabBar 代码

使用 Vant 组件库的 Tabbar 标签栏

<!-- custom-tab-bar/index.wxml -->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image class="icon" slot="icon" src="{{ item.iconPath }}" />
    <image slot="icon-active" src="{{ item.selectedIconPath }}" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>
/* custom-tab-bar/index.wxss */
.icon {
  width: 25px;
  height: 25px;
}
// custom-tab-bar/index.json 
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}
// custom-tab-bar/index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    list: [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tarbar-icon/index.png",
      "selectedIconPath": "/static/tarbar-icon/index_active.png"
    }, {
      "pagePath": "pages/page1/index",
      "text": "第一页",
      "iconPath": "/static/tarbar-icon/page1.png",
      "selectedIconPath": "/static/tarbar-icon/page1_active.png"
    }, {
      "pagePath": "pages/page2/index",
      "text": "第二页",
      "iconPath": "/static/tarbar-icon/page2.png",
      "selectedIconPath": "/static/tarbar-icon/page2_active.png"
    }, {
      "pagePath": "pages/page3/index",
      "text": "第三页",
      "iconPath": "/static/tarbar-icon/page3.png",
      "selectedIconPath": "/static/tarbar-icon/page3_active.png"
    }]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      wx.switchTab({
        url: '/' + this.data.list[event.detail].pagePath
      });
    },
    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.pagePath === page.route)
      });
    },
  }
})

待解决的问题

这里有两个问题待解决:

  1. TODO 解决微信小程序 自定义tabBar 切换时候闪烁问题。

  2. TODO Skyline引擎渲染情况下,自定义tabBar显示异常。

使用分包

何时需要分包

分包的目的在于加快用户下载小程序包的速度,改善用户体验,此处建议小程序所有页面在20个及以下,可以不用分包,超过则进行分包,并将用户高频访问的页面放在主包配置中;

特殊情况如页面少,但某些页面很重,也需要进行分包,具体结合具体页面数、页面数据大小、用户高频访问的页面等实际因素确定如何分包。

目录结构

推荐的主包和分包的一种文件组织的目录结构如下:

├── subpackages
│   ├── index
│   │   ├── index-detail-1
│   │   └── index-detail-2
│   ├── page1
│   │   └── page1-detail
├── pages
│   ├── index
│   ├── page1
│   ├── page2
│   └── page3
└── utils

分包预下载

使用场景

开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。

配置方法

预下载分包行为在进入某个页面时触发,通过在 app.json 增加 preloadRule 配置来控制。

{
  "pages": [
    "pages/index/index",
    "pages/page1/index"
  ],
  "subpackages": [
    {
      "root": "subpackages/index",
      "pages": [
        "index-detail-1/index",
        "index-detail-2/index"
      ]
    }, {
      "name": "page1",
      "root": "subpackages/page1",
      "pages": [
        "page1-detail/index"
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackages/index"]
    },
    "pages/page1/index": {
      "packages": ["page1"]
    }
  }
}

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

字段 类型 必填 默认值 说明
packages StringArray 进入页面后预下载分包的 rootname 表示主包
network String wifi 在指定网络下预下载,可选值为: all: 不限网络 wifi: 仅wifi下预下载

限制

同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。

WXML 模板(template)

介绍

WXML 提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

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

引用模板

WXML 提供两种文件引用方式importinclude

import

import可以在该文件中使用目标文件定义的template,如:

在 item.wxml 中定义了一个叫itemtemplate

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 importtemplate

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template

<!-- a.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- b.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- c.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

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

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<import src="msgItem.wxml"/>
<template is="msgItem" data="{{...item}}"/>
// pages/index/index.js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<!-- number.wxml -->
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>
<!-- pages/index/index.wxml -->
<import src="number.wxml"/>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

自定义页面加载动画模板

创建 loading 文件

在项目根目录添加以下文件:

/templates/loading/loading.wxml
/templates/loading/loading.wxss

定义 loading 模板

<template name="loading">
  <view class="loading-container">
    <view class="set-one">
      <view class="circle"></view>
      <view class="circle"></view>
    </view>
    <view class="set-two">
      <view class="circle"></view>
      <view class="circle"></view>
    </view>
  </view>
</template>
.loading-container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  z-index: 999;
  background-color: #f2f2f2;
}

.loading-container .circle {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  background: #1677ff;
  border-radius: 50%;
  margin: -25rpx;
  animation: mesh 3s ease-in-out infinite -1.5s;
}

.loading-container>view .circle:last-child {
  animation-delay: 0s;
}

.loading-container>view {
  position: absolute;
  top: 50%;
  left: 50%;
}

.loading-container>view:last-child {
  transform: rotate(90deg);
}

@keyframes mesh {
  0% {
    transform-origin: 50% -100%;
    transform: rotate(0);
  }

  50% {
    transform-origin: 50% -100%;
    transform: rotate(360deg);
  }

  50.00001% {
    transform-origin: 50% 200%;
    transform: rotate(0deg);
  }

  100% {
    transform-origin: 50% 200%;
    transform: rotate(360deg);
  }
}

使用 loading 模板

<import src="/templates/loading/loading.wxml" />
<template wx:if="{{loading}}" is="loading" />
<view wx:else>内容</view>

效果

loading

写在最后

案例中使用到的代码已上传到 github ,如有需要,请自行下载。

github地址:https://github.com/Huang-JunBin/miniprogram文章来源地址https://www.toymoban.com/news/detail-772018.html

到了这里,关于【微信小程序】从零开始搭建微信小程序项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined

    开发者工具控制台报错 Uncaught (in promise) undefined,如图: 该错误主要是因为调试基础库过高或过低导致的。 在 微信开发者工具 — 详情 — 本地设置 — 调试基础库 中,将调试基础库版本调低或调高即可 调试基础库:此处选择的基础库为微信中的基础库版本,且仅用于开发者

    2024年02月12日
    浏览(71)
  • 【微信小程序独立开发1】项目提出和框架搭建

    前言:之前学习小程序开发时仿照别人的页面自己做了一个商城项目和小说项目,最近突发奇想,想从0开发一个关于《宠物日记》的小程序,需求和页面都由自己设计,将在这记录开发的全部流程和过程中遇到的难题等...  首先创建小程序项目,AppID在微信开发者页面自己申

    2024年01月22日
    浏览(80)
  • [微信小程序开发者工具] × #initialize

    [微信小程序开发者工具] × #initialize-error: [error] 工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启,或手动打开工具 - 设置 - 安全设置,将服务端口开启。 从HBuilder运行到微信小程序的时候报错 解决办法: 打开微信开发者工具,选择设置–通用设

    2024年02月11日
    浏览(78)
  • 微信小程序开发者工具下载

    微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com) 下载安装好后,软件图标如下图所示。 运行软件如下图所示,这时候就需要使用你的管理员账号扫码登录。 登陆后的界面,如下图所示。可以项目分为两类: 小程序项目、公众号网页项目 。其中,小程序项目又细

    2024年04月23日
    浏览(124)
  • 快速上手微信小程序(纯原生)基于微信开发者工具+云开发

    最近开发一个小程序。因为体量实在不大,两张表,几个接口。便打算写原生的代码。没有使用uniapp等框架。记录一下一个小程序从搭建到审核发布的那些坑和经验做为学习笔记。 几个网站请收藏 你的小程序需要开发工具: 保姆级传送门 你的小程序需要一个身份证: 微信公

    2024年02月10日
    浏览(85)
  • 【微信小程序】微信开发者工具安装less插件

    微信小程序:本文主要是关于如何在微信开发者工具中安装less插件 不知道大家有没有像我一样习惯在vscode里面用惯了less,当需要用微信开发者工具开发小程序时,如果没有这个会有些不习惯,下面就简单介绍一下,如何在微信开发者工具中安装less插件。 less:是一个CSS预处

    2024年02月04日
    浏览(77)
  • 微信小程序:微信开发者工具安装less插件

    微信小程序:本文主要是关于如何在微信开发者工具中安装less插件 不知道大家有没有像我一样习惯在vscode里面用惯了less,当需要用微信开发者工具开发小程序时,如果没有这个会有些不习惯,下面就简单介绍一下,如何在微信开发者工具中安装less插件。 less:是一个CSS预处

    2024年02月14日
    浏览(151)
  • 【微信小程序】云开发从 0 到 1 实战,项目搭建及配置

    一、新建项目 打开 uniapp 开发工具:HBuilderX,单击「文件」-「新建」-「项目」。 给你的小程序项目起个名字,然后启用 uniCloud 云开发,选择「阿里云」,点击创建。 如果未登录的话,会弹出下面的提示框,我们用刚刚注册的「HBuilderX」账号登录一下即可。 然后就会出现下

    2024年04月16日
    浏览(64)
  • 【微信小程序】--注册小程序账号&安装开发者工具(一)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年01月17日
    浏览(114)
  • 【微信小程序】微信Web开发者工具下载及安装

    🏆今日学习目标:微信Web开发者工具下载及安装 😃创作者:颜颜yan_ ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:25分钟 🎉专栏系列:微信小程序开发 什么是微信小程序? 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者

    2024年02月09日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包