关键词：
文章目录
今天是一年一度的1024程序员节，祝大家节日快乐。前面半年我一直在研究Python和Linux相关技术，最近有需要写微信小程序的需求，为此花点时间学了下，很容易就上手了，大家不防一试。
一、day01微信小程序
1. 问题
-
什么是微信小程序
- 移动互联网时代，手机 - 手机软件，在手机中安装很多软件 - 腾讯和阿里（只安装自己不用别人） - 腾讯：微信 + N小程序 - 阿里：支付宝 + N小程序 -
为什么要做小程序？
微信用户基数大 在微信上用我们小程序比较便捷 -
如何开发小程序？
- 小程序：学习微信开发的语言（前段html、css、js、vue.js）
- 微信开发者工具
- API： restful接口（Python + flask + flask_restful）
- Pycharm
- 小程序：学习微信开发的语言（前段html、css、js、vue.js）
2. 环境的搭建
2.1 Python环境
- 虚拟环境
- flask
- flask_restful
- Pycharm
2.2 小程序环境
2.2.1 申请一个微信公众平台
2.2.2 保存自己的appid
appid：wxff2dd22b6fb5a253
2.2.3 下载开发者工具
2.2.4 创建项目
3. 开发小程序
3.1 全局配置
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window":
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "PDF转换器",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
,
"tabBar":
"selectedColor": "#CD5C5C",
"list": [
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/tabbar_news_30x30_@2x.png",
"selectedIconPath": "static/tabbar/tabbar_news_sel_30x30_@2x.png"
,
"pagePath": "pages/logs/index",
"text": "日志",
"iconPath": "static/tabbar/tabbar_news_30x30_@2x.png",
"selectedIconPath": "static/tabbar/tabbar_news_sel_30x30_@2x.png"
]
,
"networkTimeout":
"request": 10000,
"downloadFile": 10000
,
"debug": true
3.2 组件
3.2.1 text
编写文本信息，类似于span
3.2.2 view
容器，类似于div标签
3.2.3 image
图片
3.3 样式
3.3.1
- px
- rpx，750rpx
4. flex布局
一种非常方便的布局方式。
在容器中记住4个样式即可。
display: flex; flex布局
flex-direction: column; 规定主轴水平方向：row/column
justify-content: space-around; 在主轴方向如何展示：flex-start/flex-end/center/space-around/space-between/space-evenly
align-items: flex-end; 在副轴方向如何展示： flex-start/center/space-around/space-between/space-evenly
5. 实战
二、day02微信小程序
内容回顾
- 环境搭建
- 全局配置
- pages
- window
- tabbar
- 页面
- json
- js
- wxml
- wxss
- flex布局
- display：flex
- flex-direction： row、column
- justify-content
- align-item
- 小程序开发
- 标签（组件）
- text
- view
- image
- 样式
- rpx 默认750rpx
- 标签（组件）
今日概要
- 指令
- api
- 页面
今日内容
1. 跳转
1.1 标签绑定点击事件
<view bindtap="clickMe" data-nid="123" data-name="harry">点我跳转</view>
Page(
/**
* 点击绑定的时间
*/
clickMe(e)
var nid = e.currentTarget.dataset.nid
// String *harry = e.currentTarget.dataset.name
console.log(nid)
// 跳转
wx.navigateTo(
url: '/pages/redirect/redirect?id='+nid,
)
)
1.2 页面跳转
// 跳转
wx.navigateTo(
url: '/pages/redirect/redirect?id='+nid,
)
跳转到的界面如果想要接收参数，可以在onload方法中接收
Page(
/**
* 生命周期函数--监听页面加载
*/
onLoad(options)
console.log(options.id)
,
)
注意事项：只能跳转到非tabbar的界面
1.3 通过标签跳转
<navigator url="/pages/redirect/redirect?id=666">跳转到新界面</navigator>
2. 数据绑定
2.1 基本显示
-
wxml
<view> 当前头像： <image src="avatarUrl" style="height: 200rpx; width: 200rpx;"></image> </view> <view>当前用户名:name</view> <view bindtap="getUserName">获取当前用户</view> -
展示数据
/** * 页面的初始数据 */ data: message: "你好呀，哈哈", name: "", avatarUrl: "/static/222.png" ,
2.2 数据更新
changeData()
// 获取数据
console.log(this.data.message)
// 修改数据 错误的方式，这样只能改后端
// this.data.message = "222"
// 修改数据
this.setData(message: "嗨，你好呀")
,
3. 获取用户信息
方式一
- wxml
<view bindtap="getUserName">获取当前用户</view>
- js
getUserName()
var that = this
console.log('获取当前用户信息')
// 调用微信的接口， 获取用户信息
wx.getUserInfo(
success: function(res)
// 调用成功后触发
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
console.log('success', avatarUrl)
that.setData(
name: nickName,
avatarUrl: avatarUrl
)
,
fail:function(res)
// 调用失败后触发
console.log('fail', res)
)
,
方式二
- wxml
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息button</button>
- js
// pages/login/login.js
Page(
/**
* 页面的初始数据
*/
data:
name: "",
avatarUrl: "/static/222.png"
,
fetchInfo:function()
var that = this
console.log('获取当前用户信息')
// 调用微信的接口， 获取用户信息
wx.getUserInfo(
success: function(res)
// 调用成功后触发
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
console.log('success', avatarUrl)
that.setData(
name: nickName,
avatarUrl: avatarUrl
)
,
fail:function(res)
// 调用失败后触发
console.log('fail', res)
)
,
/**
* 生命周期函数--监听页面加载
*/
onLoad(options)
,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady()
,
/**
* 生命周期函数--监听页面显示
*/
onShow()
,
/**
* 生命周期函数--监听页面隐藏
*/
onHide()
,
/**
* 生命周期函数--监听页面卸载
*/
onUnload()
,
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh()
,
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom()
,
/**
* 用户点击右上角分享
*/
onShareAppMessage()
)
注意事项：
-
想要获取用户信息，必须经过用户授权（button）
-
已授权
-
不授权，通过调用wx.opensettings
// 打开配置，手动授权 wx.openSetting()
4. 获取用户的位置信息
getLocalPath:function()
var that = this
wx.chooseLocation(
success:function(res)
console.log(res)
that.setData(
localpath: res.address
)
)
,
app.json
"permission":
"scope.userLocation":
"desc": "你的位置信息将被展示在小程序"
,
"requiredPrivateInfos": [
"getLocation"
]
5. for指令
<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>----------------------------</view>
<view>
<view wx:for="dataList">index-item</view>
<!-- index 和 item别名 -->
<!-- <view wx:for="dataList" wx:for-index="idx" wx:for-item="itemName">idx-itemName</view> -->
</view>
<view>----------------------------</view>
<view>
userInfo.name
userInfo.age
</view>
<view>----------------------------</view>
<view>
<view wx:for="userInfo">index:item</view>
</view>
js
/**
* 页面的初始数据
*/
data:
dataList: ["小明", "harry", "小花"],
userInfo:
name: "harry",
age: 18
,
6. 获取图片
-
wxml
<text bindtap="uploadImage">请上传图片</text> <view class="container"> <image wx:for="imageList" src="item"></image> </view> -
js
uploadImage:function() var that = this wx.chooseImage( count: 6, sizeType: ["original", "compressed"], sourceType: ["album","camera"], success: (res) => console.log(res) // 默认图片 + 新选择图片 that.setData( imageList: that.data.imageList.concat(res.tempFilePaths) ) , fail: (res) => console.log(res) , complete: (res) => console.log(res) , ) ,
注意：图片目前只是上传到内存。
总结
-
标签（组件）
- text
- view
- image
- navigator，跳转到其他页面（非tabbar页面）
- button
-
时间
-
bindtap
<view bindtap="func"></view> <view bindtap="func" data-xx="123"></view>func:function(e) e.currentTarget.dataset
-
-
api
- navigateTo
wx.navigateTo( url: '/pages/redirect/redirect?id='+nid, )- openSetting
wx.openSetting()- getUserInfo
wx.getUserInfo( success: function(res) )- chooseLocation
wx.chooseLocation( success:function(res) )- chooseImage
wx.chooseImage( count: 6, sizeType: ["original", "compressed"], sourceType: ["album","camera"], success: (res) => ) -
数据绑定
-
for指令
注意：setData + that
作业
1.拍卖详细页面
-
拍卖列表页面通过for循环+后端数据展示信息
-
点击拍卖列表中的某项拍卖时，需要将自己的id传递给拍卖详细页面
2.发布消息的页面
- 上传图片
- 选择位置
<textarea></textarea>
三、day03微信小程序
今日概要
- 小程序
- 后端api
今日详情
1. 数据绑定
- 基本绑定
- for循环
双向绑定
2.用户登录
day04微信小程序
今日概要
- 用户登录、注册
- 发布心情
- 图片上传
- 查看心情
- 查看心情详情
今日详情
1. 用户登录
1.1 发送短信
1.2 登录
-
小程序公共对象
-
App.js
App( /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () var userInfo = wx.getStorageSync('userInfo') if (userInfo) this.globalData.userInfo = userInfo , globalData: userInfo: null , initUserInfo:function(res, localUser) console.log(localUser.nickName) var info = token: res.token, phone: res.phone, nickName: localUser.nickName, avatarUrl: localUser.avatarUrl console.log(info) // 获取公共app, 赋值， 全局变量赋值 this.globalData.userInfo = info // phone:xxx, token:xxx // 在本地存储值 wx.setStorageSync('userInfo', info) , delUserInfo:function() this.globalData.userInfo = null wx.removeStorageSync('userInfo') )- 其他页面
var app = getApp() Page( /** * 页面的初始数据 */ data: userInfo:null , /** * 生命周期函数--监听页面显示(每次都执行) */ onShow() this.setData( userInfo: app.globalData.userInfo ) , /** * 用户注销 */ onClickLogout:function() app.globalData.userInfo = null wx.removeStorageSync('userInfo') this.setData( userInfo:null ) )注意：修改globalData之后， 其他页面已用的值不会自动变化，而是需要手动设置。
-
-
本地存储
wx.getStorageSync('userInfo') wx.setStorageSync('userInfo', info) wx.removeStorageSync('userInfo') -
页面调用栈
var pages = getCurrentPages() prevPage = pages[pages.length-2] -
跳回上一个页面
wx.navigateBack(查看详情微信小程序三分钟学会小程序的条件渲染(代码片段)
...wx:if使用3.hiden实现条件渲染4.wx:ifvshidden这篇文章是三分钟学会小程序的条件渲染教程，所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染，各自有不同的应用场景，只有... 查看详情
三天的时间，如何学会c++，原来只要四个步骤
还真有！而且只需要3天的时间，就可以精通C++！你需要完成这几步：和你的朋友立个flag：我要3天学会C++，赌一辆玛莎拉蒂！花上10年的功夫，精通C++；研究生物化学、分子生物学、遗传学，利用这些知识，研制出返老还童药水... 查看详情
微信小程序入门到精通—appid和个性配置你学会了么？(代码片段)
目录前言一、AppID的获取二、初始化配置2.1新建项目并初始化2.2代码初始化2.2.1app.json2.2.2project.config.json2.2.3sitemap.json总结前言对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢&#x... 查看详情
搭建微信小程序商城需要哪些步骤？
...步骤非常简单，就算是不懂专业技术的新手小白也能轻松学会，并且快速完成小程序商城的搭建。参考技 查看详情
程序老鸟c#学习：3天学会全部基础--第三天(代码片段)
往期文章分享点击跳转=>熬夜再战Android从青铜到王者-UI组件快速搭建App界面点击跳转=>熬夜再战Android从青铜到王者-几个适配方案点击跳转=>熬夜再战Android从青铜到王者-开发效率插件篇点击跳转=>Unity粒子特... 查看详情
微信小程序支付成功后跳转app卡死
参考技术A跳转链接错误。微信小程序支付成功后跳转APP卡死是因为在程序代码中，跳转链接出现问题，是需要进行重新修改小程序即可。微信小程序，小程序的一种是一种不需要下载安装即可使用的应用，它实现了应用“触手... 查看详情
微信小程序导入three.js
例子：GitHub-wechat-miniprogram/threejs-miniprogram:WeChatMiniProgramadaptedversionofThree.js重点是：1.解压后要在根目录下运行npminstall前置条件是需要windows下安装npm链接：Node.js下载安装就行，然后在cmd下确认执行没有问题完成后 查看详情
微信小程序发布后获取失败请稍后重试
参考技术A没有进行微信认证。问题出现原因，当前小程序账号没有进行微信认证，解决方案，点击微信认证详情，认证处理之后可以使用，微信小程序在开发者工具和真机调试可以获取数据。 查看详情
微信小程序付款后怎么退款
参考技术A如果是正规网结购物的平台，是可以直接退款，或者下载相关APP，去APP登录退款，又或者直接找客服申请退款。 查看详情
微信小程序培训
...发基础知识。2、边讲边做实例，跟着实例巩固知识，并学会开发流程。3、会布置练习，力求听完课后自己能做。4、预留答疑时间。需要参加培训的请加qq：3429476441 查看详情
微信小程序从入门到学会第七天-小程序的自定义组件
参考技术A当我们多次使用同一个组件的时候，我们可以将其进行封装然后进行使用，这个时候，自定义组件就起到了很好的作用，前面虽然我们讲到了自定义组件，不过那都是皮毛，仅仅只是讲到了自定义组件的创建和使用罢... 查看详情
微信小程序后端java接口开发(代码片段)
微信小程序后端Java接口开发微信小程序使用wx.request(OBJECT)来调用后端接口。首先我们来一个简单案例——helloworld实现1、搭建一个springboot项目并引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-... 查看详情
python3-pillow的基本用法(第三天)(代码片段)
...Python2.x中对图像进行处理的。pillow是PIL的一个分支,支持Python32.安装pillow的 查看详情
微信小程序怎么注销个人信息
参考技术A微信小程序注销个人信息方法如下：手机型号：iPhone13。手机系统：ios15。软件：微信。1、打开手机微信，进入微信首页，点击页面下方的“发现”，进入微信的发现页。 2、进入微信的发现页后，点击小程序，进... 查看详情
微信小程序登陆不上去怎么回事？
以微信7.0.18为例，微信登不上小程序的原因：1、误将微信公众授权到微信小程序。2、当前网络信号不好。3、小程序本身出现了故障问题。4、手机系统问题。参考技术A微信小程序的账号有别于公众号，因此在扫描授权的时候，... 查看详情
微信小程序-注册程序app.js
一、注册程序App() 函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。object参数署名：onLaunch:当小程序初始化完成后，触发onLaunch只触发一次onShow()：当小程序启动，或从后台进入前台显示，会触... 查看详情
python编写微信小程序命令行操作脚本
参考技术A本次目的是利用python编写一个脚本，可以通过命令行向指定appid上传微信小程序 查看详情