![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
从基础开始学习小程序
大白菜程序猿
执着技术的大白菜程序猿
展开
-
微信小程序跳转不带任何样式简洁跳转
微信小程序简单跳转原创 2022-06-18 21:29:03 · 447 阅读 · 0 评论 -
微信小程序背景照片,居中铺满显示在view标签中
微信小程序背景照片,居中铺满显示在view标签中原创 2022-06-08 15:31:08 · 1477 阅读 · 0 评论 -
微信小程序水平居中,和垂直居中
微信小程序各类居中设计精髓原创 2022-06-08 15:22:08 · 3166 阅读 · 0 评论 -
微信小程序顶部固定不可滑动的顶部分页导航栏
微信小程序顶部固定不可滑动的顶部分页导航栏原创 2022-06-07 14:38:38 · 1233 阅读 · 0 评论 -
微信小程序宫格导航
微信小程序宫格导航栏设置教程原创 2022-06-07 14:12:43 · 1069 阅读 · 0 评论 -
微信小程序轮播图swiper
微信小程序设置顶部轮播图原创 2022-06-07 13:36:08 · 101 阅读 · 0 评论 -
微信小程序Tabbar
微信小程序设置底部导航栏原创 2022-06-07 11:16:36 · 110 阅读 · 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 · 203 阅读 · 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 · 3766 阅读 · 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 · 1025 阅读 · 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 · 5723 阅读 · 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 · 451 阅读 · 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 · 2270 阅读 · 4 评论 -
微信小程序通过数据绑定获取用户名和头像
微信小程序通过数据绑定获取用户名和密码1.获取用户名和头像<view>数据绑定</view><view>数据:{{message}}</view><view>数据:{{message}}</view> <button bindtap="changData">点击修改数据</button><view>当前用户名:{{name}}</view><view>获取用户头原创 2021-03-28 11:51:15 · 600 阅读 · 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 · 917 阅读 · 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 · 1216 阅读 · 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 · 1510 阅读 · 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 · 154 阅读 · 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 · 1222 阅读 · 0 评论