微信小程序 老男孩课程（day1-2.5 到django不会了..要学Pythone）
2024-05-12 07:34:38
Day1 微信小程序
1 、什么是微信小程序
- 如何开发微信小程序
-
- 小程序：微信开发的语言 （前端html、css、js）
- API：restful接口（Phthon +django+drf框架）
pycharm ？
2、环境的搭建
2.1Python环境
- 虚拟环境
– djiango
– drf - pycharm
2.2小程序环境
2.2.1 申请一个微信公众平台
在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。2.2.2保存自己的appid
wx161f1f9a6b56747a2.2.3 微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、开发小程序 - - 页面
- json
- js
- wxml
- wxss
3.1 全局配置 - app.json
pages 总共几个页面 及路径window 主窗口的标题区域： 名称、字体粗细、字体颜色（黑/白 ）、区域背景颜色tabbar 页面设置 list ：路径、名称、图标（选中/未选中）
{"pages": ["pages/index/index","pages/paimai/paimai"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"selectedColor": "#000000""list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/pages/images/home-off.png","selectedIconPath": "/pages/images/home-on.png"},{"pagePath": "pages/paimai/paimai","text": "拍卖","iconPath": "/pages/images/home-off.png","selectedIconPath": "/pages/images/home-on.png"}]}}
3.2组件
text view image
3.3 样式
px ； 宽度 750rpx
4、flex布局 --wxss样式里面
在容器中记住4个杨思就牛x了
itme{display: flex; /*定义flex布局*/flex-direction: row; /*规定主轴方向*/justify-content: space-around; /* 元素在主轴方向的排列方式*/align-items: center; /*元素在副轴上的排列方式*/}
知识点：在wxss样式里面，套娃样式
.box{}.box .itme{} 注意：第二个点钱的 空格.box .itme image{} 注意：image前的空格
知识点 赋值
大括号 {:}小括号（=）
知识点 换行
text 不换行
view 换行
Day02 微信小程序
内容回顾
搭建环境
全局配置
pageswindowtabbar页面
jsonjswxmlwxssflex布局
display：flexflex-diretion：row/column 主轴方向justify-content：flex-start/end speak-around 主轴的样式ailgn-item：副轴上的样式
小程序的开发
组件（标签）
text view image input...样式
750rpx
今天概要
指令
api
页面
List item
今日内容（对应D2-3）
1.页面跳转
c .navigator跳转
<navigator url="/pages/xiangqing/xiangqing?id=aaa111">点击跳转</navigator>
a. 基本结构
1.1 对标签绑定点击事件 index.wxml
<view bindtap="clickMe">点我</view>
1.2 点击绑定事件并 页面跳转 index.js
clickMe:function(e){ /*定义点击函数*/ wx.navigateTo({ /* 跳转新页面 */url: '/pages/redirect/redirect'}
b. 晋级结构 跳转+传递参数
1.1 绑定点击事件 index.wxml
<view bindtap="clickMe" data-nid="03430" data-name="liucd" </view> <!-- data- 是要传递的数据-->
1.2 点击绑定事件并页面跳转+ 传递参数 index.js，
clickMe:function(e){var nid=e.currentTarget.dataset.nid /*定义函数*/wx.navigateTo({ /*跳转页面*/url: '/pages/redirect/redirect?id='+nid /*?id+nid 字符串拼接，跳转的同时，传递数据*/})}
1.3 接受传递数据到跳转的页面 redirect.js
onLoad: function (options) {console.log(options)}
只能跳转到 非TABBAR
2.数据绑定
WXML 中的动态数据均来自对应 Page 的 data
简单绑定
- wxml
<view>数据：{{message}}</view>
- js
page({data: {message:"aaa" }
})晋级绑定
- wxml 设定
<view>数据：{{message}}</view><button bindtap="changedata" type="primary">点击修改数据</button>
- js 展示展示并更新
page({data: {message:"aaa"},changedata:function(){this.setData({message:"bbb"}) /*后端改了数据，前端相应，要用this.setdata*/}
})
3.获取用户信息 / 用户授权
wxml
<view>当前用户:{{name}}</view>
js
wx.getUserInfo({success:function(res){that.setData({name:res.UserInfo.nickName}) //用户名that.setData({touxiangpath:res.userInfo.avatarUrl }) //用户微信头像that.setData({address:res.address}) //用户地址})
3.1获取用户姓名
wx.getUserInfo({success:function(res){console.log(res)} //成功后触发fail：function(res)(fail:res)})
<view>当前用户:{{name}}</view><button open-type="getUserInfo" bindgetuserinfo="tapname" type="primary">点击获取</button>
Page({/* 页面的初始数据 */data:{name:"" //赋值为空},tapname:function(){var that=this //多重套娃，重新定义函数wx.getUserInfo({ //调用微信内部接口，获取信息success:function(res){ //成功则，触发 res 内部返回值that.setData({name:res.userInfo.nickName})},fail:function(res){ }})}})
3.2获取用户头像
<!--获取用户姓名和头像--><view>用户信息:{{name}}</view><view>用户头像:</view><image src="{{path}}"></image><button open-type="getUserInfo" bindgetuserinfo="tapname" type="primary">点击获取</button>
page({data:{name:"" , //赋值为空path:"/pages/images/home-off.png"},/*** 获取用户姓名*/tapname:function(){wx.openSetting({ }) //手动授权var that=this //多重套娃，重新定义函数wx.getUserInfo({ //微信内部接口success:function(res){ //成功则，触发 res 内部返回值that.setData({name:res.userInfo.nickName, //用户姓名path:res.userInfo.avatarUrl //用户微信头像})},fail:function(res){ }})}
})
注意事项
激活得用户信息，必须经过授权 （button bindgetuser和open-type）
复授权 调用wx.opensetting
//打开配置，手动授权//wx.opsetting({})
3.3获取用户地理位置
<!--获取用户位置--><view bindtap="location">请选择你的位置:{{address}}</view>
location:function(){var that=thiswx.chooseLocation({success:function(res){that.setData({address:res.address})},fail:function(res){}})},
3.4 for指令
3.4.1获取列表
<!--获取列表--><view wx:for="{{goodslist}}">{{index}}-{{item}}</view> //获取列表中数据 []index 序号<view wx:for="{{goodsprice}}">{{index}}-{{item}}</view> //列举字典里面的数据
<!--获取列表-->data: {goodslist:["DT392","DT471","DT520"],goodsprice:{DT392:39800.00,DT471:79800.00}},
3.4.2 上传图片
<image wx:for="{{piclist}}" src="{{item}}" class="pic"></image> //{{item}} 是固定值
<button bindtap="uppicture" type="primary">请选择图片</button>
简单
data: { },uppicture:function(){var that=thiswx.chooseImage({success:function(res){that.setData({piclist:res.tempFilePaths}) //tempFilePaths}})},
进阶
data: {piclist:[URL="/pages/images/guany-off.png",URL="/pages/images/guany-on.png"]},uppicture:function(){var that=thiswx.chooseImage({success:function(res){that.setData({piclist:that.data.piclist.concat(res.tempFilePaths)}) //concat 继续加入列表 列表元素累加}})}
注意 ：图片只是上传到了内存
Day2 总结
标签（组件） navigator…
text view imagenavigator 跳转页面（默认不会跳到Tabbar）button 按钮，（建议用来获取用户信息）rextarea 多行文本
事件 bindtap
**bindtap**
<view bindtap="func"></view><<view bindtap="func" data-nid="xxx"></view>>传递数据 func:function(){e.currentTarget.dataset}
api 5个
**wx.**
wx.navigateTo // 跳转
navigateTo wx.navigateTo({ url:“/pages/xxx/xxx?id=”+nid})
<navigator url="/pages/xiangqing/xiangqing?id=aaa111">点击跳转</navigator>
wx.openSetting //手动 授权开关 （在获取个人信息时候）
wx,opensetting()
wx.getUserInfo //获取个人信息 建议和button结合
wx.getUserInfo({success:function(res){this,setData(xxx:res.nid)}})
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},
wx.chooseLocation //选择位置
wx.chooseLocation({success:function(res){that.setData({address:res.address})},
wx.chooseImage //选择图片上传 tempFilePaths
wx.chooseImage({success:function(res){that.setData({piclist:that.data.piclist.concat(res.tempFilePaths)}) //concat 继续加入列表 列表元素累加}})
for 指令 循环
后端是列表或字典
注意
setdata，弄到前端that=this
Day2 作业
1、拍卖的详细页面2、发布消息的页面3、功能点：- 拍卖列表页面通过for循环+后端数据展示信息- 点击拍卖列表中的某项拍卖时，需要蒋自己的ID传递给拍卖详细页面 onload - 上传图片- 选择位置
作业的问题==========
加图片之后显示的位置
上不去 位置信息
input 不能拐弯
textarea 多行文本
Day3
内容回顾
组件
textarea text navigator image input view button
事件
bindtap 点击事件
API 5个
wx.for //历遍wx.navigate To //跳转 wx.openSting //打开个人信息授权页面开关wx.getUserInfo //传递个人信息wx.chooseImage //选择图片wx.chooseLocation //选择地点
--格式wx.chooseLocation({success:function(res){that.setData({address:res.address})},
今日概要
- 小程序
- 后端的api
今日详细
1、数据绑定
简单绑定
wxml<view>数据：{{message}}</view> jspage({data: {message:"aaa" }})for循环
2、用户登录（手机号）
2.1 简单的双向绑定
==value detail ==
wxml
<text>你输入了：{{message}}</text><input value="{{message}}" bindinput="bindtxt" ></input>
js
Page({data: {message:"芝麻开门" //其实吧 这句 可以不要},
bindtxt:function(e){this.setData({message:e.detail.value})
e.detail.value,detail 这个其实可以用 console.log 执行结果里面找到
2.2 手机号和验证码输入
wx.request
wxml
<view>手机号：</view><input type="text" value="{{phone}}" placeholder="请输入手机号" bindinput="phonetxt" > </input><button type="primary" bindtap="login">登录</button>
js
data:{phone:"",code:""},phonetxt:function(e){this.setData({phone:e.detail.value})},login:function(){wx.requst({url:"",data:{phone:this.data.phone,code:this.data.code},method:"post"success:function(res){}}) }
========================================================
P24 到此为止了，django…要学Pythone
知识积累
border-radius：50rpx 圆角图像
文字圆角背景
.messages-left{ /*背景圆角*/background-color: aquamarine;border-radius:30rpx;padding: 5rpx 25rpx;text-align: center;
}
line-height：50rpx 行间距
align-items：center //flex盒子 居中
text-align: center; //文字 居中
margin: auto; //图片 居中
flex 垂直对齐
.title1-box-fenxiang{display: flex;flex-direction: column;align-items:flex-end;margin: 15rpx auto ;
}
点击图片跳转页面
<navigator url="/pages/xiangqing/xiangqing" open-type="navigate"><image src="/pages/images/茅台.jpg"></image></navigator>
图片拉伸错误
宽100% 宽充满 不变形
<image src="/pages/images/茅台.jpg" mode="widthFix" style="width: 100%;"></image>
api
wx.naviget
wx.for
wx.chooseloction
wx.chooseimage
微信小程序 老男孩课程（day1-2.5 到django不会了..要学Pythone）相关推荐
- 微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...
- 基于微信小程序学生课程考勤系统后端SSM可升级SpringBoot
开发技术:微信小程序客户端 + Java后台服务器端 + mysql数据库 项目一共2个身份,用户和管理员.学生在小程序客户端绑定手机号登录后,可以首页查看新闻公告信息,可以查询课程信息,用户选择自己 ...
- 微信小程序开发学习—Day1
文章目录 1.小程序简介 1.1.什么是小程序 1.2.发展背景 1.3.小程序与普通网页开发的区别 1.4.主要优势 2.第一个小程序 2.1.注册小程序开发账号 2.2.了解微信开发者工具 3.小 ...
- 基于微信小程序的课程分享平台小程序
文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
- 基于微信小程序的课程点名签到系统设计与实现 报告+项目源码及数据库文件
题目:微信点名系统小程序 目录 第一节 系统分析与设计 1.1 需求分析 1.2 数据库设计 1.2.1 数据库模型图(初步设计) 1.3 系统功能设计 第二节 系统开发及实现 2.1 系统开发平台及 ...
- python flask实战订餐系统微信小程序-00课程介绍及项目演示
讲课流程 从管理员后端到小程序会员端,按照功能展开讲解 核心代码同步编写,重点代码反复分析讲解 建议大家按顺序观看视频 课程收获 主流的Python3 火爆的小程序 Centos云主机部署 搭建高可用 ...
- 微信小程序学习日记day1
全局文件的设置 1.新增一个页面 当你想新建一个页面时,直接在app.json中加入page字段值,如图,保存后,系统自动创建一个页面 2.主界面设置 将主界面文件在app.json中page值放在最 ...
- 微信小程序之课程选择器
话不多说,直接上效果图 代码如下 wxml <view class="urg_input"><picker class="gradePicker&quo ...
- 微信小程序豆瓣项目Day1(components组件+index主页)
创建自定义组件 创建好所需要的所有自定义组件目录 如下图: 这是我们需要实现的页面样式: 页面分为了搜索框.电影.电视剧.综艺.四个模块. 我们可以定义出搜索的模块以及下面三个影视列表的显示模块. 1 ...
最新文章
- Android Stdio报错Caused by: org.gradle.api.internal.plugins.PluginApplicationException: Failed
- java 生成.sh文件,Java 生成Bat或SH文件，调用Sqlldr安插数据到Oracle
- iOS 修改项目名称
- 【转】Linux命令行下svn ignore忽略文件或文件夹用法
- python文件和数据的格式化_Python在文本文件中格式化特定数据
- python监控某个程序_写一个python的服务监控程序
- Open vSwitch 使用
- Thinkphp修改一句代码，使得foreach标签支持对象，增加变量[数组对象]混合解析法！...
- 分析JQ作者的类实现过程
- 持续集成~Jenkins构建GitHub项目的实现
- 终于，J 神还是加入了 Google！
- 同时大量连接导致的DDOS攻击，导致收发器宕机，用户大面积超时掉线
- 【椭球大地测量学】Python及MATLAB实现大地坐标与空间直角坐标间的转换编程（含流程图）
- 正方形面积圆形面积Java
- 程序员有七个等级？你又属于哪个等级呢？
- 微信小程序实现简单定位功能
- remosaic插值算法_图像插值算法及其实现
- vs调试时报错：变量已被优化掉，因而不可用
- cocos2dx 图片资源加密解密
- python 使用随笔