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
wx161f1f9a6b56747a -
2.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 微信小程序
内容回顾
搭建环境
-
全局配置
pages window tabbar -
页面
json js wxml wxss -
flex布局
-
display：flex flex-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=this
wx.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=this
wx.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=this
wx.chooseImage({
success:function(res){
that.setData({piclist:that.data.piclist.concat(res.tempFilePaths)}) //concat 继续加入列表 列表元素累加
}
})
}
注意 ：图片只是上传到了内存
Day2 总结
标签（组件） navigator…
text view image
navigator 跳转页面（默认不会跳到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> js page({ 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
扫一扫
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
