![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序开发
文章平均质量分 75
顺其自然lll
这个作者很懒,什么都没留下…
展开
-
UI组件库Vant Weapp的下载和使用
Vant Weapp - 轻量、可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一。开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面。小程序自定义组件从基础库版本1.6.3开始,小程序开始支持简洁的组件化编程。开发者可以将页面内的功能模块制作成自定义组件,以便在不同的页面中重复使用;也可以将复杂内容拆分成若干个低耦合的模块,这样有助于代码的后期维护。例如,目前小程序的原生组件中是没有卡片组件的,开发者可以自行使用图片、按.原创 2022-05-09 22:11:26 · 6251 阅读 · 2 评论 -
基于全套云能力的图片分享社区
综合应用云数据库,云函数和云存储制作一款图片分享社区小程序。用户可以上传图片到云存储空间中,也可以查看其它用户上传的图片列表,并进行图片分享,下载和全屏预览。创建云模板项目首先需要创建一个云开发项目,在任意盘符下创建一个空白文件夹(cloudPhoto)找到app.json文件,打开并删除其中的页面引用,只保留第一个index删除image文件夹中的所有图片删除style文件夹,此时项目清理完毕部署云数据库打开云开发控制台,创建一个新的数据集,例如:photos检查photo原创 2022-04-24 18:18:36 · 830 阅读 · 0 评论 -
获取用户信息-微信小程序
button组件中的open-type<button open-type=""></button>中的open-type用于提供微信开放能力。open-type有如下合法值:contact,打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从bindcontact 回调中获得具体信息。share,触发用户转发。getPhoneNumber,获取用户手机号,可以从bindgetphonenumber回调中获取用户信息。getUserInfo,获取用户信息,可以从原创 2022-04-21 14:19:03 · 2072 阅读 · 0 评论 -
基于云存储的电子书橱-小程序云开发
云存储的小程序项目无须自行搭建服务器,可以在小程序前端直接使用云开发API下载云存储中的电子书资源到本地设备进行使用。创建云模板项目在任意盘符下创建一个空白文件夹cloudBooks.然后填入AppID和选择“小程序-云开发”选择“详情”->"调试基础库" 选择人数最多的打开miniprogram文件夹中的app.json文件,将其中的 "style": "v2"去掉,page中只保留 "pages/index/index"打开pages文件,删除index以外的所有目录删原创 2022-04-20 11:56:19 · 2087 阅读 · 1 评论 -
贪吃蛇游戏-小程序游戏
<canvas>组件和小程序界面API的相关用法1.需求分析本项目一共需要2个页面,即首页和游戏页面,其中首页用于呈现关卡菜单,点击对应难度的关卡后进入游戏界面1.1首页功能需求首页需要包含标题和关卡列表关卡列表包含两种游戏模式,即简单模式和困难模式,主要区别在于贪吃蛇移动速度的快慢。点击关卡图片可以打开对应的游戏界面1.2游戏页功能需求游戏页面需要显示当前得分,游戏画面,方向键和“重新开始”按钮点击方向键可以使贪吃蛇上,下,左,右转方向前进和吃食物游戏画原创 2022-04-14 17:57:27 · 8132 阅读 · 2 评论 -
如何开通小程序云环境,并使用云数据库
开发者开通云开发环境后无须自行搭建第三方服务器即可享有存储,数据库等云能力掌握云数据集创建和权限设定的步骤掌握小程序前端与云数据库交互的方法云开发是腾讯提供的一套完整原生云端支持和微信服务支持,开发者无需搭建第三方服务器,可以直接使用云端能力开发微信小程序,小游戏云开发弱化了后端和运维的概念,直接使用云平台提供的API进行核心业务开发,并实现快速上线和迭代。可以同时使用云开发能力和其他第三方云服务。云开发能力介绍目前云开发能力主要分为三大功能,即云函数,云存储和云数据库,云函数:原创 2022-04-09 12:41:27 · 2159 阅读 · 0 评论 -
临时服务器部署和Navicat for MySQL 数据库搭建
小程序前端项目对接上后端服务器,数据库和存储可以称为小程序的全栈开发。以WAMP(Windows+Apache+MySQL+PHP)组合为例从零开始详解如何部署服务器,搭建数据库以及实现后端接口,基于前面的项目进行全栈开发。现有项目导入复制现有项目文件,修改名称为newsDemo_WAMP导入后端逻辑实现后端逻辑实现包含服务器部署,数据库搭建以及接口的实现,以Windows+Apache+MySQL+PHP服务器环境为例进行示范。小程序对于接口制作所使用的数据库,后端语.原创 2022-04-05 15:57:02 · 1116 阅读 · 0 评论 -
拼图游戏-小程序游戏
掌握<canvas>组件和绘图API本项目一共需要两个页面:首页和游戏页面。首页用于呈现关卡菜单,点击对应难度的关卡后进入游戏画面。首页功能需求:(1)包含标题和关卡列表(2)关卡至少要有6个关卡选项,每个关卡显示预览图片和第几关(3)点击关卡列表可以打开对应的游戏界面游戏页功能需求:(1)游戏页面需要显示游戏提示图,游戏画面,“重新开始”按钮(2) 每关游戏提示图显示对应的图片预览(3)游戏画面随机将原图打乱为3x3的小方块,并且可移动被点击的方块。(4原创 2022-03-30 14:17:18 · 4790 阅读 · 2 评论 -
地图组件的使用-位置API
获取和查看位置接口,地图组件控制的系列接口需要在创建项目的位置创建一个image文件夹用于存放背景图片和嘉宾头像图标页面上主要以垂直滚动的形式展示会议的各种内容。会议地点区域的地图和”查看详情“按钮,<map>组件和<button>组件<!--index.wxml--><view class="box"><view class="title">会议主题</view><view class="c.原创 2022-03-26 13:46:28 · 398 阅读 · 0 评论 -
医疗急救卡-数据API
使用小程序表单组件仿IOS健康App创建一个简易版的医疗急救卡创建文件firstaidCard首页设计:未创建医疗急救卡时,此时只显示一个”创建医疗急救卡“按钮;已经创建医疗急救卡:此时显示用户的医疗信息,最下方显示”打电话给紧急联系人“和”编辑医疗急救卡“两个按钮<!--index.wxml--><!-- 尚未创建医疗急救卡显示该页面 --><view class="container"><button>创建医...原创 2022-03-25 02:45:00 · 2856 阅读 · 3 评论 -
电子书架-小程序文件API
效果:在上一篇文章中搭建的模拟服务器phpStudy中的文件地址中的www文件在www文件中再创建一个books文件用于存放电子书创建完电子书文件之后就可以在浏览器上输入http://localhost/books/book001.pdf就可以查看电子书了进行微信小程序项目创建创建文件夹bookDemoapp,json{ "pages":[ "pages/index/index" ], "window": {...原创 2022-03-23 11:49:32 · 1536 阅读 · 0 评论 -
视频播放小程序-小程序媒体API-基础入门
视频播放效果:视频列表的切换方法视频自动播放方法视频随机颜色弹幕效果一。界面设计1.创建项目videoDemo将app.json文件内pages属性中的”pages/logs/logs“删除删除utils文件夹及其内容删除index.wxml和index.wxss中的全部代码删除index.js全部代码并输入page找到按回车键自动补全函数同理删除app.js全部代码,并且输入关键词app找到第一个选项按回车键补全代码1.导航栏设计...原创 2022-03-20 19:24:39 · 3573 阅读 · 1 评论 -
天气查询-小程序网络API
1.服务器域名配置每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中需对域名地址https://devapi.qweather.com进行服务器配置小程序开发者登录mp.weixin.qq.com进入管理员后台,单击“设置”按钮,切换至“开发设置”面板,在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址将当前需要使用的接口添加到“request合法域名”中,配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址...原创 2022-03-19 22:49:14 · 1601 阅读 · 3 评论 -
和风天气开发平台使用
使用小程序网络API的相关应用制作一款天气查询小程序服务器域名配置和临时服务器部署wx.request接口的用法原创 2022-03-18 22:50:57 · 2308 阅读 · 0 评论 -
计算器-基础入门
<!--index.wxml--><view class="container"><input bindblur="blur1" style="width:50vw;border-style:solid"></input><input bindblur="blur2" style="width:50vw;border-style:solid"></input><button type="primary" bindtap=.原创 2022-03-18 12:03:12 · 102 阅读 · 0 评论 -
猜数字游戏-小程序组件-基础入门
效果展示1.创建页面文件首页:index.wxml开始游戏:game.wxml游戏规则:rules.wxml关于我们:about.wxml需修改aoo.json文件内的pages属性{ "pages":[ "pages/index/index", "pages/game/game", "pages/about/about", "pages/rules/rules" ]}2.删除修改文件...原创 2022-03-17 18:07:39 · 6586 阅读 · 1 评论 -
九宫格布局小程序-模仿微信钱包界面设计-基础入门
使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格项目创建完毕之后,在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面;将app.json文件内pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号删除utils文件夹及其内部所有内容。删除pages文件夹下的logs目录及其内部所有内容删除index.wxml和index.wxss中的全部代码删除index.js中的代码 并输入pa原创 2022-03-16 17:14:56 · 6839 阅读 · 2 评论 -
小程序框架-列表布局小程序
列表布局小程序页面容器:<view class='container'></view><!--index.wxml--><view class='container'><view class='listGroup'> /*列表组*/<view class='listItem'> /*列表项单行*/<image src='/images/moments.png'></image><原创 2022-03-15 00:11:09 · 1137 阅读 · 0 评论 -
手动创建微信小程序-基础入门
<view class="container"><image src="/images/1.png" mode="widthFix"></image><text>Hello World</text><button>点击获取头像</button> </view>mode="widthFix" 表示宽度改变,高度自动适应app.wxss为公共样式表注释快捷键:Ctrl+/不推荐使...原创 2022-03-13 17:07:04 · 169 阅读 · 0 评论