从零构建微信小程序项目
文章平均质量分 84
通过原生微信小程序实现一整套小程序项目,从静态页面构建、后台数据模拟服务搭建,到前后台数据交互。掌握本套教程,原生微信小程序开发将不是问题。
我是波哩个波
千行代码,Bug何处藏。纵使上线又怎样,朝令改,夕断肠。
展开
-
心理咨询类_微信小程序项目实战、含:标注图、效果图、视频、源码
一、项目概述1.1 教程导读 本套教程以项目为导向,从零构建一整套微信小程序项目,从静态页面实现,到后台数据mock服务搭建、最后前后台数据交互。 本套教程是模拟线上微信小程序应用:十方智育实现。 本套教程相关素材、代码、视频,如有需要的,可以私信我 或 评论区留下邮箱。1.2 适合人群 有一定的HTML/CSS/JavaScript基础,无需精通。 有一定基础的同学,可以按照教程文档,逐步实现项目;本套教程同样...原创 2021-10-09 13:58:28 · 7152 阅读 · 13 评论 -
18_心理咨询_微信小程序项目实战_数据交互_文章详情页(涵盖:多页面传参和富文本解析)
一、页面传参和数据获取文章详情页只有一个页面,里面的数据都是动态获取的,根据点击文章列表的id来获取对应的数据;1、定义文章详情页,在app.json里面定义"pages/articleDetail/articleDetail",2、当我们点击文章列表的时候,跳转到文章详情页,并且把文章的id传递到文章详情页<template name="articleTemplate"> <navigator class="...原创 2021-10-09 11:12:48 · 606 阅读 · 0 评论 -
17_心理咨询_微信小程序项目实战_数据交互_精选文章列表(涵盖:上提加载和下拉刷新)
一、数据定义精选文章页面的数据结构之前我们已经定义过了,在首页的精选文章部分,之前我们只定义了5条,现在无非弄多一点数据而已,因为我们要做上提加载(分页); 怎么获取数据?1、进入官网,访问对应的页面,比如精选文章: https://www.hnsfxlzx.com/sf/p/view/article/rmwz 2、打开浏览器控制台(谷歌浏...原创 2021-10-09 11:06:39 · 598 阅读 · 0 评论 -
16_心理咨询_微信小程序项目实战_数据交互_登录和注册
一、登录页面数据定义登录和注册使用的是一套数据,无非登录是进行了用户数据的查询,注册是用户数据的添加; id 用户编号 userName 用户名 userPwd 密码 nickName 昵称 realName 真实姓名 integral ...原创 2021-10-09 10:52:55 · 801 阅读 · 1 评论 -
15_心理咨询_微信小程序项目实战_数据交互_首页
前置把十方智育的图片资源、视频资源等都放在json-server的public目录下面的指定文件夹中; public json-server的静态资源目录images 所有的图片资源audio 所有的音频资源video 所有的视频资源 我们在实际开发中,图片、...原创 2021-10-09 10:41:34 · 955 阅读 · 0 评论 -
14_从零构建微信小程序项目_数据交互_json-server详解
一、Node环境搭建Node.js 简介Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具!Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使 Node.js 表现得非常出色。Node.js 应用程序运行于单个进程中,无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原生功能(用以防止 Jav...原创 2021-09-30 15:08:36 · 2359 阅读 · 2 评论 -
13_心理咨询_微信小程序项目实战_数据交互_WXML语法详解
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。一、数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容<view> {{ message }} </view>Page({ data: { message: 'Hel...原创 2021-09-29 17:30:39 · 631 阅读 · 1 评论 -
12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序
我们实现静态页面,只需要稍微懂一点HTML/CSS即可或者零基础都可以,但是如果想要进行数据交互,需要对小程序有一定的理解; 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。 一、小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。目前有很多种小程序:微信小程序、支付宝小程序、今日头条小程序、百度小程序等,如果公...原创 2021-09-29 17:12:11 · 1664 阅读 · 0 评论 -
11_心理咨询_微信小程序项目实战_注册页面静态效果实现
一、页面实现注册页面和登录页面,无非就是换一下组件;<!-- 定义form组件 --><form bindsubmit="toRegister"> <!-- 输入框区域 --> <view id="inputView"> <!-- 文本框 --> <input type="text" placeholder="用户名" name="userName"></input>...原创 2021-09-23 14:50:02 · 643 阅读 · 2 评论 -
10_心理咨询_微信小程序项目实战_登录页面静态效果实现
一、表单相关组件buttonbutton 按钮。常用属性如下:属性 类型 默认值 必填 说明 size string default 否 按钮的大小 type string default 否 按钮的样式类型 plain boolean false 否 按钮是否镂空,背景色透明 disabled boolean false 否 ...原创 2021-09-23 14:46:14 · 784 阅读 · 0 评论 -
09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现
一、咨询师信息页面结构在app.json里面的pages里面定义"pages/consultDetails/consultDetails"1、定义一个view,给其添加id:consultInfoView;2、在consultInfoView定义4个view,分别承载咨询师头像、名称、等级、证书等;3、在第四个view里面定义两个view,分别承载已认证和查看证书的文本;给第四个view添加一个id:ccieView...原创 2021-09-23 14:34:31 · 803 阅读 · 0 评论 -
08_心理咨询_微信小程序项目实战_关于我们页面静态效果实现
一、页面效果实现页面结构在app.json里面的pages里面定义"pages/aboutUs/aboutUs"1、定义一个view,给其添加id:qrCodeView,然后在其中定义图片和文字;2、定义一个view,给其添加id:companyView;3、在companyView里面定义5个子view,分别来承载公司名称、地址、电话、邮箱、简介,给这5个子view添加class=companyItemView;...原创 2021-09-23 14:16:42 · 1729 阅读 · 0 评论 -
07_心理咨询_微信小程序项目实战_精选文章页面静态效果实现
页面效果展示一、前言目前我们已经实现了4张页面,分别是首页、咨询页面、课程页面、我的页面;这四张页面,我们都可以通过tabBar来实现跳转,这四个页面也就是我们所说的tabBar页面; 对于非tabBar页面,怎么跳转呢?比如:我们现在要写的精选文章页面,是点击首页精选文章区域的查看更多跳转过来的;怎么实现跳转,这是我们这一节要讨论的重点;精选文章页面对大家来说,已经没有什么难度了;二、文章列表页面结构...原创 2021-09-18 15:40:17 · 752 阅读 · 0 评论 -
05_心理咨询_微信小程序项目实战_课程页面静态效果实现
页面效果展示一、页面标题和搜索框页面标题也是通过页面配置实现; 搜索框如果不考虑代码复用,那么直接从首页的代码中复制粘贴相关的结构和样式即可;二、小导航页面结构1、定义一个view,给其定义id:smallNavView;2、在smallNavView定义三个子view3、子view里面分别承载对应的图片和文字即可;<!-- 小导航 --><view ...原创 2021-09-18 15:39:44 · 596 阅读 · 1 评论 -
06_心理咨询_微信小程序项目实战_我的页面静态效果实现
页面效果展示我们现在只实现静态效果,等后面json-server服务搭建之后,我们才做数据交互;一、用户信息展示页面结构1、定义一个view,给其定义id:userInfoView;2、在userInfoView里面定义三个子view,分别用来承载昵称、来自哪里、积分;<!-- 用户信息展示区域 --><view id="userInfoView"> <view>昵称: 少年先锋队...原创 2021-09-18 15:39:59 · 746 阅读 · 0 评论 -
04_心理咨询_微信小程序项目实战_咨询页面静态效果实现
一、页面标题我们之前在app.json里面进行了全局配置,设置标题为十方智育;现在咨询预约页面的标题不是十方智育,那么我们可以通过页面配置将全局配置给覆盖掉; 页面配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page. html每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当...原创 2021-09-18 15:00:03 · 1555 阅读 · 4 评论 -
03_心理咨询_微信小程序项目实战_首页静态效果实现
一、导航栏和tabBar全局配置介绍微信小程序端中实现导航栏和tabBar,是通过配置实现的;这是区别于移动端开发的点;参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 小程序的配置分为三部分:全局配置:对微信小程序进行全局配置,它是对整个视口(可视化窗口)的设置; ...原创 2021-09-17 14:54:15 · 2228 阅读 · 2 评论 -
02_心理咨询_微信小程序项目实战_项目环境搭建
一、开发工具的下载和安装二、账号的注册三、项目搭建四、开发者工具界面介绍原创 2021-09-17 14:14:14 · 805 阅读 · 1 评论 -
01_心理咨询_微信小程序项目实战_项目概述
本套教程以项目为导向,从零构建一整套小程序项目,从静态页面实现,到后台数据mock服务搭建、最后前后台整合。 本套教程是模拟线上微信小程序应用:十方智育实现。 本套教程相关素材、代码、视频,如有需要的,可以私信我。 适合人群:有一定的HTML/CSS/JavaScript基础,无需精通。原创 2021-09-17 14:07:43 · 1418 阅读 · 3 评论