![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
从基础开始学习小程序
大白菜程序猿
大家好,我是大白菜程序猿,一名热衷于在数字世界中遨游的IT博主。在这个日新月异的科技时代,我坚信技术是推动社会进步的重要力量。因此,我致力于将最前沿的IT资讯、实用的技术教程、以及那些能够激发灵感的创新案例,通过我的博客和社交媒体平台,分享给每一位对科技充满热情的你。
从编程语言的深度剖析,到云计算、大数据、人工智能等前沿技术的趋势洞察,再到网络安全、项目管理等实战经验的分享,我力求内容既具广度又有深度,帮助大家构建起坚实的技术知识体系,同时也鼓励大家勇于探索未知,不断挑战自我极限。
展开
-
微信小程序跳转不带任何样式简洁跳转
微信小程序简单跳转原创 2022-06-18 21:29:03 · 461 阅读 · 0 评论 -
微信小程序背景照片,居中铺满显示在view标签中
微信小程序背景照片,居中铺满显示在view标签中原创 2022-06-08 15:31:08 · 1505 阅读 · 0 评论 -
微信小程序水平居中,和垂直居中
微信小程序各类居中设计精髓原创 2022-06-08 15:22:08 · 3211 阅读 · 0 评论 -
微信小程序顶部固定不可滑动的顶部分页导航栏
微信小程序顶部固定不可滑动的顶部分页导航栏原创 2022-06-07 14:38:38 · 1247 阅读 · 0 评论 -
微信小程序宫格导航
微信小程序宫格导航栏设置教程原创 2022-06-07 14:12:43 · 1087 阅读 · 0 评论 -
微信小程序轮播图swiper
微信小程序设置顶部轮播图原创 2022-06-07 13:36:08 · 117 阅读 · 0 评论 -
微信小程序Tabbar
微信小程序设置底部导航栏原创 2022-06-07 11:16:36 · 125 阅读 · 0 评论 -
微信小程序页面跳转合集
1.微信小程序页面内使用标签跳转<view class="btn-area"> <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect"原创 2022-01-03 11:50:46 · 210 阅读 · 0 评论 -
微信小程序商品列表小案例
商品展示代码书写<!--pages/goods2/goods2.wxml--><text>pages/goods2/goods2.wxml</text><view class='list'> <block wx:for='{{dataList}}' wx:key='list' wx:for-item="item"> <view class="list_item"> <navigator url='de原创 2021-04-08 00:26:13 · 3838 阅读 · 3 评论 -
微信小程序左右联动商品列表
<!--pages/l_rgoods/l_rgoods.wxml--><text>pages/l_rgoods/l_rgoods.wxml</text><view class="container"> <!--左侧栏--> <scroll-view class='scroll_left' scroll-y="true"> <view class="nav_left"> <blo.原创 2021-04-08 00:09:50 · 1037 阅读 · 1 评论 -
微信小程序商品详情页面开发案例
商品详情页面开发案例页面详细设计详细设计步骤:<!--pages/goods1/goods1.wxml--><text>这是一个测试</text><!--商品幻灯片--><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner" duration="{{duration}}" circu原创 2021-04-05 15:42:53 · 5768 阅读 · 10 评论 -
微信小程序用户电话号码登录设计(欢迎关注大白菜程序猿内容持续更新中)
双向绑定1.双向绑定实例<view>您输入了:{{message}}</view><input placeholder="请输入内容:" value="{{message}}" bindinput="bindTxt"></input> Page({ data: { message:"贱人" }, bindTxt:function(e){ console.log(e); this.setData({message:e原创 2021-04-04 21:13:16 · 457 阅读 · 0 评论 -
微信小程序获取用户信息,获取位置,for指令,获取图片
获取用户信息第一种官方不推荐<!-- 获取用户名 --><view>当前用户名:{{name}}</view><view>获取用户头像 <image src="{{path}}" style="height:200rpx;width:200rpx"></image></view><view bindtap="getUsrName">获取房前用户名:</view> data:原创 2021-04-03 12:02:52 · 2277 阅读 · 4 评论 -
微信小程序通过数据绑定获取用户名和头像
微信小程序通过数据绑定获取用户名和密码1.获取用户名和头像<view>数据绑定</view><view>数据:{{message}}</view><view>数据:{{message}}</view> <button bindtap="changData">点击修改数据</button><view>当前用户名:{{name}}</view><view>获取用户头原创 2021-03-28 11:51:15 · 614 阅读 · 0 评论 -
微信小程序跳转界面和参数获取
1.跳转界面1.1对标签进行绑定事件<view bindtap="ChilkMe" data-nid="123" data-name="SD">点击跳转</view>// index.js// 获取应用实例const app = getApp()Page({ getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹原创 2021-03-28 10:19:48 · 941 阅读 · 0 评论 -
微信小程序简单页面开发案例
1.组件照片组合<view>示例一</view><view class="menu"> <view class="item"> <text>精品</text> <image src="/.../.../xxx.jpg"></image> </view> <view class="item"> <text>精品</t原创 2021-03-27 12:24:23 · 1233 阅读 · 0 评论 -
微信小程序云开发上传自带数据库数据并且打开视频
微信小程序上传视频到数据库代码如下:<button bindtap="uploadVideo" type="primary">上传视频</button><video src="{{VideoUrl}}"></video>let VideoUrlExchange=""Page({ /** * 页面的初始数据 */ data: { VideoUrl:"" },uploadVideo(){ wx.chooseVide原创 2020-10-17 09:02:54 · 1524 阅读 · 0 评论 -
微信小程序
微信小程序字体的属性设置空格的使用以及字体的居中设置示例代码展示:wxml:<view class="font" > <text decode="{{true}}"> 这是一段文字 </text> <view>wxss:.font{ //行高作用于 view 标签中 line-height: 60rpx; font-size: larger; font-weight: 5原创 2020-09-25 18:09:09 · 167 阅读 · 0 评论 -
微信小程序我的页面开发与跳转界面
微信小程序我的页面开发与跳转界面登录界面的配置wxml代码片段://获取用户头像<view> <!-- 头像后面的背景 --> <image class='bg' src='' background-size='cover'></image></view><view class="tx"> <view class="logo"> <open-data type="useravat原创 2020-09-25 16:06:40 · 1234 阅读 · 0 评论