微信小程序
文章平均质量分 67
本专题整理微信小程序开发过程知识
呆萌宝儿姐
CSDN专家博主、阿里云开发者社区专家博主、51CTO社区专家博主、360书馆认证博主、知乎掘金B站等平台受邀作者。
展开
-
微信小程序——天气查询案例
文章目录页面展示项目链接项目设计获取天气数据API小程序填写key小程序设计页面展示项目链接https://download.csdn.net/download/weixin_45525272/17842268项目设计获取天气数据API进入和风天气控制台https://console.qweather.com/#/console没有账号的注册一个账号申请成为个人开发者,上传身份证信息认证认证好之后,进入应用管理创建一个应用,获得key小程序填写key小程序设计wxml&l原创 2021-04-25 16:46:48 · 4436 阅读 · 10 评论 -
微信小程序——推箱子小游戏
文章目录项目展示项目链接项目设计配置首页游戏界面项目展示项目链接https://download.csdn.net/download/weixin_45525272/17061639项目设计配置地图数据/utils/data.js//================================================//地图数据map1-map4//地图数据:1墙,2路,3终点,4箱子,5人物,0墙的外围//================================原创 2021-04-23 10:24:50 · 7640 阅读 · 20 评论 -
微信小程序——拼图游戏案例
文章目录页面展示项目链接项目设计首页面游戏页面页面展示项目链接https://download.csdn.net/download/weixin_45525272/17048569项目设计首页面wxml<!--index.wxml--><view class="container"> <!-- 标题 --> <view class="title">游戏选关</view> <!-- 关卡列表 -->原创 2021-04-23 09:31:45 · 5379 阅读 · 0 评论 -
微信小程序——猜数字游戏小案例
文章目录项目展示项目链接项目设计项目展示项目链接https://download.csdn.net/download/weixin_45525272/17043459项目设计关于于规则就不写了wxml<!--pages/game/game.wxml--><view class='container'> <text>欢迎来到猜数字小游戏</text> <form> <block wx:if='{{isGame原创 2021-04-23 09:12:43 · 8510 阅读 · 4 评论 -
用微信小程序写一个微信(布局练习)
文章目录页面展示项目链接项目设计app.jsonindex(发现页面)wallet(钱包页面)页面展示项目链接https://download.csdn.net/download/weixin_45525272/17042019项目设计app.json{ "pages": [ "pages/index/index", "pages/wallet/wallet" ], "sitemapLocation": "sitemap.json",原创 2021-04-23 08:58:59 · 4178 阅读 · 1 评论 -
小程序模块化开发
文章目录1. 模块模块的定义和使用:注意2. 模板模板的定义和使用:定义使用注意3. 自定义组件4. 插件1. 模块模块的定义和使用:module.exports = { welcome: 'welcome'}var welcome = require('../utils/welcome.js')Page({ data: {}, onLoad: function() { … } })注意需要注意的是,path路径不可以使用绝对路径,否则会报错,应该使用相原创 2021-04-16 10:09:40 · 4369 阅读 · 0 评论 -
微信小程序App()方法与getApp()方法
App()注册一个小程序小程序的入口方法例如://app.jsApp({ onLaunch: function(options) { console.log("onLaunch"); }, onShow: function(options) { console.log("onShow"); // Do something when show. }, onHide: function() { console.log("onHide");原创 2021-04-14 10:15:54 · 3697 阅读 · 0 评论 -
仿蜜雪冰城点餐小程序
文章目录糙了糙了,以后有时间重新整理这个项目效果展示前端基本配置(utils)首页订单页个人中心点餐列表(※)订单确认与订单详情后端(node.js)糙了糙了,以后有时间重新整理这个项目效果展示前端基本配置(utils)基本样式,请求处理等等。。。。。。https://yangyongli.blog.csdn.net/article/details/115524784首页https://yangyongli.blog.csdn.net/article/details/115524529原创 2021-04-08 21:08:19 · 13524 阅读 · 35 评论 -
小程序订餐系统——后端开发
这个项目前端逻辑性较强,后端处理相对简单,数据也没存在数据库中,存入了不同的json文件中app.js// npm install express --save// npm install ejs --savevar fs = require('fs');var express = require("express");var bodyParser = require('body-parser');var app = express();app.use(bodyParser.json())原创 2021-04-08 21:07:44 · 6213 阅读 · 7 评论 -
小程序订餐系统——订单确认与订单详情
文章目录订单确认页面设计页面样式页面逻辑订单详情页面设计页面样式页面逻辑订单确认页面设计<view> <!-- 取餐时间 --> <view class="top-bar"> <label class="top-left-label">请确认您的订单</label> </view> <!-- 订单详情 --> <view class="order-info"> <v原创 2021-04-08 20:57:13 · 5836 阅读 · 0 评论 -
小程序点餐系统——点餐列表页(未讲解完)
文章目录点餐列表(※)代码页面设计页面样式页面逻辑点餐列表(※)代码页面设计页面分为四部分顶部:折扣信息区左侧:菜单总览右侧:菜单详细列表栏底部:购物操作顶部:很简单<!-- 折扣信息区 --><view class="discount"> <text class="discount-txt">减</text>满50元减10元(在线支付专享)</view><view>菜单总览这里我们用到s原创 2021-04-08 20:44:18 · 7001 阅读 · 8 评论 -
小程序点餐系统——个人中心
文章目录个人中心页面展示代码页面设计页面样式页面逻辑个人中心页面展示代码页面设计<view class="avatar"> <image src="{{listData.avatar}}" mode="aspectFill"></image></view><view class="content"> <view class="con">消费记录</view></view><vie原创 2021-04-08 17:05:14 · 4950 阅读 · 1 评论 -
小程序点餐系统——订单页
文章目录订单页效果图代码页面设计页面样式页面逻辑订单页效果图代码页面设计<scroll-view class="container" scroll-y="true"> <block wx:for="{{orderList}}" wx:for-item="item" wx:for-index="idx" wx:key="{{item.order_id}}"> <view class="orderList" data-postId="{{item.order原创 2021-04-08 17:02:01 · 5953 阅读 · 0 评论 -
小程序点餐系统——基本配置(utils)
文章目录基本配置(utils)公共cssfetch.js 接口的请求util.js 公共方法基本配置(utils)公共css/* 订单详情部分 */.order-info{ background: white; margin-top:10px;}.order-info-title{ font-size:12px; color: #D1D1D1; padding: 12px; border-bottom: 1px #E3E3E3 solid}/* 清单数量 */.ca原创 2021-04-08 16:50:25 · 6143 阅读 · 2 评论 -
小程序点餐系统——首页
文章目录效果图代码页面设计页面样式页面逻辑效果图代码页面设计轮播图基本配置比较简单,在本文中不做过多讲解<!--pages/home/home.wxml--><block wx:for="{{listData}}" wx:key="itemlist"> <!-- 菜单轮播图 --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{int原创 2021-04-08 16:45:05 · 6665 阅读 · 2 评论 -
微信小程序——模拟时钟案例
文章目录案例效果图前导知识:canvas代码部分案例效果图实时更新,因为我当时是六点多前导知识:canvas微信小程序中的canvas画布(内容过多,请查看我整理的另一篇博客):链接:https://yangyongli.blog.csdn.net/article/details/115406308如果想查看网页中的canvas知识,可点击:https://blog.csdn.net/weixin_45525272/article/details/113527524代码部分wxml<原创 2021-04-02 19:06:42 · 9024 阅读 · 0 评论 -
微信小程序中的canvas
文章目录canvas 常用属性:canvas基本用法:注意:canvas绘制基本步骤:canvas绘制笑脸:canvas对象方法介绍:canvas 常用属性:canvas基本用法:创建canvas.wxml文件。<canvas canvas-id="myCanvas"></canvas> canvas组件默认样式如下。canvas { width: 300px; height: 150px; display: block; position:原创 2021-04-02 19:01:43 · 12743 阅读 · 7 评论 -
微信小程序用户登录功能探究
文章目录前导知识登录流程具体细节:补:小程序数据缓存相关知识保存数据缓存示例获取数据缓存示例用户登录是微信小程序必不可少的环节,一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。比如下图是未登录状态登陆后会显示详情信息前导知识小程序通过微信官方提供的,获取微信提登录能力供的用户身份标识,建立用户体系。用户登录流程时序图(下图所示):用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与,下面介绍这3个角色的作用:小程序:用户使用的客户原创 2021-04-02 18:30:36 · 7063 阅读 · 0 评论 -
微信小程序——用户登录模块服务器搭建
文章目录服务器安装与配置代码编写给大家整理了一下开启服务器我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客。服务器安装与配置初始化项目,将会自动创建package.json配置文件。npm init -y安装Express框架和request模块。npm install express –savenpm install request --save安装nodemon监控文件修改(如果已经安装则跳过此步)。npm install nodemon -原创 2021-04-02 09:16:02 · 5146 阅读 · 0 评论 -
小程序数据缓存机制应用
文章目录小程序数据缓存相关知识参数保存数据缓存获取数据缓存示例:在onLoad中存入并获取小程序数据缓存相关知识数据缓存:缓存数据,从而在小程序退出后再次打开时,可以从缓存中读取上次保存的数据,常用的数据缓存API如下表所示:注意:将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。参数详细参数请见https://develop原创 2021-04-02 07:38:28 · 5464 阅读 · 1 评论 -
仿网易云音乐小程序
文章目录仿网易云音乐小程序效果展示各部分讲解主框架设计主要功能实现后端服务设计源码链接仿网易云音乐小程序效果展示 音乐小程序,点击播放效果视频 各部分讲解主框架设计https://blog.csdn.net/weixin_45525272/article/details/115343816主要功能实现https://blog.csdn.net/weixin_45525272/原创 2021-03-31 17:09:47 · 6934 阅读 · 2 评论 -
打造自己的音乐小程序(下)——后端设计与开发
文章目录后端说明配置运行node代码后端说明后端采用node.js开发实现(没有安装的可以查看我以前整理的node博客,https://blog.csdn.net/weixin_45525272/category_10080631.html?spm=1001.2014.3001.5482)这里我直接将资源设置成url形式,当播放时候才会调用请求资源(我没有继续写请求,所以后端比较简单)src: 'http://localhost:3000/还是会想你.mp3'配置运行将音乐资源放到 htdoc原创 2021-03-31 17:02:58 · 6264 阅读 · 3 评论 -
打造自己的音乐小程序(中)——主要功能实现
文章目录效果展示主信息页面:info.wxml播放页面:play.wxml播放列表:playlist.wxml效果展示 音乐小程序,点击播放效果视频 content 有 主页面信息,音乐播放器,播放列表三部分构成info:主页信息内容部分play:播放器页面playlist:播放列表主要功能包括主页信息,播放器页面,播放列表三部分下面依次是各部分效果图主信息页面原创 2021-03-31 16:55:16 · 6357 阅读 · 1 评论 -
打造自己的音乐小程序(上)——主框架设计
文章目录效果展示系统设计代码模块index.wxml效果展示 音乐小程序 系统设计程序主页面,其中包括header content footer 三大部分header 是tab栏,用于切换页面content 有 主页面信息,音乐播放器,播放列表三部分构成info:play:playlist:footer 是播放器,用于点击播放,切歌,查看列表,查看播放。代码模原创 2021-03-31 16:39:52 · 6355 阅读 · 1 评论 -
微信小程序——计算器案例
文章目录项目展示页面设计页面样式页面逻辑util-->calc.jsindex.js项目展示页面设计分为上面输入的显示部分和下面按键部分<!--pages/index/index.wxml--><view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view></view&原创 2021-03-30 15:23:45 · 7271 阅读 · 1 评论 -
微信小程序——调查问卷案例
文章目录页面效果页面设计页面样式页面逻辑后端代码(node.js)页面效果页面设计<view class="container"> <form bindsubmit="submit"> <view> <text>姓名:</text> <input name="name" value="{{name}}" /> </view> <view> &原创 2021-03-29 20:49:29 · 8215 阅读 · 2 评论 -
微信小程序——比较数字大小案例
文章目录页面效果讲解代码页面样式页面设计页面逻辑页面效果讲解代码页面样式/* pages/index/index.wxss */view { margin: 50rpx;}input { width: 600rpx; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;}button { margin: 50rpx;}button { color: #fff; background: #FF600原创 2021-03-29 19:55:59 · 11331 阅读 · 1 评论 -
涂鸦小程序——为自己的人生画上一笔
文章目录示例代码wxml部分wxss部分js部分js全示例代码wxml部分上部分是个canvas画布,下面布局五个圆盒子即可<view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->原创 2021-03-26 21:47:06 · 7343 阅读 · 3 评论 -
微信小程序图片上传功能(PHP后端)
文章目录效果图前端效果图后端代码wxmljsphp效果图前端效果图后端功能比较简单,解释都在注释里,这里就不进行讲解了代码wxml<view class="main"> <image src='{{source}}'/><button bindtap="uploadimg">拍照或上传图片</button> </view> jsPage({ data:{ source:"", }, // 上传图原创 2021-03-24 21:06:58 · 5898 阅读 · 1 评论 -
微信小程序打造本地宝(3)——消息列表
列表模块上拉界面重新加载onPullDownRefresh():监听用户下拉动作首先,下拉加载要调用系统的API onPullDownRefresh() 来实现,在onPullDownRefresh()中,首先要把列表中的原始数据清空,将shopList,pageIndex等统统初始化,在进行重新获取数据操作。最后一定要 wx.stopPullDownRefresh(); 否则在手机端一直存在。/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefres原创 2021-02-03 13:41:17 · 4531 阅读 · 1 评论 -
微信小程序打造本地宝(3)——个人中心
文章目录个人中心展示头像列表功能小白条的封装在(一)中已经写了箭头个人中心展示由图中可以看出,大体可分为头像、列表功能、小白条、小箭头头像用wxss渲染就可以啦/* pages/profile/profile.wxss */.avatar{ background-color: #f60; height: 400rpx;}.avatar image{ width: 200rpx; height: 200rpx; border:10rpx solid原创 2021-01-28 21:29:30 · 4774 阅读 · 0 评论 -
微信小程序打造本地宝(2)——消息列表
文章目录消息列表展示一般写法wx:formessage.jsonmessage.wxss消息列表展示又图中可看出,虽然消息很多,但是他们的格式是一样的,我们依然可以用 wx:for 去列表渲染所有消息,所以整体大模块其实就只有一个一般写法<view class="card"> <text class='card-title'>标题111</text> <text class='card-date'>2017-12-11</te原创 2021-01-28 21:23:14 · 4600 阅读 · 2 评论 -
微信小程序打造本地宝(1)—— 主页面
微信小程序基础实现添加轮播图把图片放上后觉得有点不妥,就去wxml里修改样式原创 2021-01-19 23:08:53 · 6365 阅读 · 1 评论 -
nginx安装配置ssl模块支持https访问
文章目录一、SSL证书申请免费证书或者购买1、证书下载2、配置Nginx常见错误错误一:解决方案:错误二:解决方案:错误三:配置好后https仍然无法访问情况1:端口443未开放情况2:访问为改成https情况3:未备案(去进行域名备案就好啦)一、SSL证书申请免费证书或者购买我是通过阿里云申请的免费证书https://yundun.console.aliyun.com/?spm=5176.12818093.ProductAndService–ali–widget-home-product-rece原创 2021-01-15 20:37:03 · 3928 阅读 · 1 评论 -
Flex实现栅格布局
文章目录引导:清除浮动带来的影响一、flex伸缩(弹性)布局二、flex伸缩布局的方向三、水平垂直居中传统布局(回顾)flex布局四、flex换行排列五、案例:本地宝界面传统浮动实现flex布局实现引导:清除浮动带来的影响如果不清除浮动就会带来一系列影响,需要在父盒子里加上overflow:hidden属性(或者其他清除浮动的方式)<!DOCTYPE html><html><head> <meta charset="UTF-8">原创 2021-01-05 14:11:19 · 6511 阅读 · 1 评论 -
Flex 布局教程:语法篇
Flex 布局教程:语法篇一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */原创 2020-10-12 22:43:18 · 4009 阅读 · 0 评论