写在前面的话:算不了入门教程,只能算这几晚的摸索教程,下次会出一篇一文入门小程序
javascript
本文示例源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/basephp
在线浏览:https://github.lesschina.com/js/5.wechat/1.小程序摸索.htmlcss
有些同志留言说我消失了,文章更新频率比之前慢多了?我这边先统一回复一下:html
最近这几个月
利用空闲时间把三国读完了(咳,别问我为何读,就是忽然想读了)前端
PS:有空聊聊呗~java
而后最近两个星期
迷上了读书,回头可能会发点读书笔记,推荐几本不错的书给你们git
而后就是上次发文
,修复Shopee上传限制的时候使用了下JQ
来快速实现github
PS:说到底仍是个后端偏数据方向的,也就
JQ
还记得。。。数据库
而后本着专研的精神,又把H5
复习了一下小程序
PS:几年前曾经在旧博客写过H5的读书笔记
原本准备找下思惟导图快速过下的,以后发现。。。当时懒了一下,只是发图,因此。。丢包了
。。。
PS:因而最近几天闲暇之余
W3C
逛的比较多
而后先是改写了上次的脚本,再写了H5
的markdown草稿
PS:过几天大家应该能够看到了,咳,人老了~容易疲劳。。让我先缓缓。。先缓缓
而后专研的毛病又来了,草稿写到导航和多媒体的时候想用小程序试试,毕竟如今是小程序的天下了
PS:以前前给亲戚弄小程序的时候研究了1个晚上,发现不是很难,而后如今想到了
而后发现~前端的东西的确不难,可是我这人有个毛病:喜欢追求页面的美感。。
因而发现。。demo几分钟搞定了,为了调个漂亮样式却耗去几小时。。。
PS:原本今天能够早点休息的,因而乎~陪你们熬个夜吧。。。
我用的很少,简单引入一下,小程序API用起来很简单的,更全的能够去官方查看
PS:唉,仍是Python官方文档最省心啊~
话说,之后仍是老老实实先把上面几个系列文章清了再说吧~
PS:清了之后,我还会回来的~
小程序|公众号
登陆注册页面:https://mp.weixin.qq.com/
这个太简单,就不浪费时间了,贴个官方教程:https://developers.weixin.qq.com/miniprogram/dev/#申请账号
下载开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
新建个简单项目:
项目基本配置:通常在详细里面改就好了
文件简单介绍:(图说的很清楚了)
PS:用法和css同样,在小程序中像素单位所有用rpx
(相似于rem
)
rpx
: 能够根据屏幕宽度进行自适应,文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
PS:小程序支持的标签:https://developers.weixin.qq.com/miniprogram/dev/component/
下面开始就记录下遇到的小技术点:
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/1data
在页面的data中定义了几个字段:
想在页面中显示只须要写成{{xxx}}
便可
PS:你每次保存,左边都会有预览的
{{xxx}}
也能够在样式和属性中哦~(wxss和css用法同样
)
贴下demo:(支持的标签看官方文档便可)
<!--index.wxml--> <view class='container'> <view class='{{my_class}}'>{{name}}</view> <view>{{age}}</view> <view>{{work.name}}</view> <view>{{work.location}}</view> </view>
脚本:(支持ES6语法)
//index.js Page({ data: { name: "小明", age: 23, work: { "name": "微软", "location": "中国" }, my_class: "red" }, onLoad: function() { console.log("页面加载完成"); } })
样式:
/* index.wxss */ view { padding: 10rpx; } .red { color: red; }
效果演示:
知识点
:
this.data.xxx
this.setData({xxx:xx})
bindtap="自定义方法"
属性来个修改页面初始数据的案例:(官方说先修改js中的值,而后异步修改页面中的值)
<!--index.wxml--> <view class='container'> <view class='{{my_class}}'>{{name}}</view> <view>{{age}}</view> <view>{{work.name}}</view> <view>{{work.location}}</view> <button bindtap='update_info'>点我就修改</button> </view>
脚本文件:
//index.js Page({ data: { name: "小明", age: 23, work: { "name": "微软", "location": "中国" }, my_class: "red" }, onLoad: function() { console.log("页面加载完成"); }, // 自定义方法 // look:新增内容 update_info: function() { // this对象常常容易变,我通常都存一份 var that = this; // 后台获取data里的值 console.log(that.data.name, that.data.age) // 修改data(直接赋值没用) that.setData({ age: 25, name: "小华", work: { "name": "苹果", "location": "美国" } }); } })
效果展现:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/2show
知识点:wx.showToast({title:'内容',icon:'什么图标',duration:多少毫秒})
在View中添加按钮:
<button bindtap='show_msg1'>点我弹两行</button> <button bindtap='show_msg2'>点我就成功</button>
脚本中添加自定义方法:
Page({ data: { title1: '你知道吗?这是能够显示多行的弹框提醒~\r\n你知道吗?这是能够显示多行的弹框提醒~\r\n你知道吗?这是能够显示多行的弹框提醒~', title2: '一二三四五六七八' }, onLoad: function() { console.log("页面加载完成"); }, // 弹框提醒 show_msg1: function() { wx.showToast({ title: this.data.title1, icon: 'none', // 能够显示2行 duration: 2000 // 默认1500 }) }, // 弹框提醒 show_msg2: function() { // 默认只能显示7个中文字 wx.showToast({ title: this.data.title2 }) } })
效果演示:(\r\n
可能在PC调试的时候不换行,可是能够在手机中换行)
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/3data
说这个以前,先普及一下H5的这方面知识:
自定义属性
:在标签中的data-自定义属性名
(为了规范化)
dom.dataset.自定义属性名
or dom.dataset["自定义属性名"]
dom.dataset.自定义属性名 = xxx
or dom.dataset["自定义属性名"] = xxx
delete dom.dataset.自定义属性名
or delete dom.dataset["自定义属性名"]
dom.getAttribute("属性名")
dom.removeAttribute("属性名")
dom.setAttribute("属性名", "值")
dom.hasAttribute("属性名")
举个栗子:
<div class="test" data-name="mmd" data-test-one="test">自定义属性</div> <script> // 获取标签的自定义属性值 let list = document.querySelector(".test").dataset; // 获取:dom.dataset.自定义属性名(属性名不包含`data-`) console.log(list.name); // PS:test-one名字会改为驼峰命名的变量:testOne console.log(list.testOne) // 设置:dom.dataset.自定义属性名 = xxx or dataset[自定义属性名] = xxx list.name = "小明"; // 标签中对应值会变成小明 list.age = 23; // 添加一个属性 // PS:设置为data-test-two list.testTwo = "test2"; </script>
输出效果:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
知识点:设置hover样式
:在标签内置了hover-class="xxx"
属性
view:
<view class='container'> <view data-name='小张' data-age='22' bindtap='get_datas' hover-class='hover'>点我获取data值</view> </view>
js:(ES6语法忘记的同志能够去以前写的一文读懂ES6)
Page({ data: { title: '获取Data属性的值' }, onLoad: function(options) { // 设置标题 wx.setNavigationBarTitle({ title: this.data.title, }); }, get_datas: function(e) { console.log(e); let infos = e.currentTarget.dataset; // 显示弹框 wx.showToast({ title: `Name:${infos.name},Age:${infos.age}`, // ES6语法 icon: 'none' }) } })
样式:
.hover { color: green; }
动态演示:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarTitle.html
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/4title
知识点:wx.setNavigationBarTitle({title:"xxx"})
view:
<view class='container'> <text>这是一个测试页面</text> </view>
js文件:
Page({ data: { title: '欢迎光临' }, onLoad: function(options) { // 设置标题 wx.setNavigationBarTitle({ title: this.data.title, }); } })
效果演示:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.makePhoneCall.html
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/6tel
知识点:wx.makePhoneCall({phoneNumber:"xx"})
view:
<view class='container'> <view hover-class='hover'> <text data-tel='{{tel}}' bindtap='call_tel'>{{info}}{{tel}}</text> </view> </view>
js:
Page({ data: { info: "客服电话:", tel: "95017" }, onLoad: function(options) {}, call_tel: function() { // 打电话 wx.makePhoneCall({ phoneNumber: this.data.tel }); } })
动态演示:
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/5img
这个和html同样,CSS3就能够实现了
wxml:
<view class='container bg'> <view>This is Test</view> </view>
wxss:
.container { height: 1500rpx; } .bg { /* 设置背景图片的尺寸 */ background-size: 100% 100%; /* CSS3 */ /* 不支持本地图片,可使用Base64或者容许域名下的图片 */ background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJ...省略); }
动态展现:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
PS:图片懒加载:lazy-load="true"
wxml:
<view class='container'> <!-- 高度自适应 --> <image class="bg" src="../../images/bg.jpg" mode="widthFix"></image> </view>
wxss:
.container { padding: 0rpx; } .bg { width: 100%; }
动态展现:
其实不少时候都是由于height设置100%,它不生效,因此才各类样式来调节
能够这样设置来达到目的:设置宽度100%,高度100vh
(整个屏幕默认满屏为100vh)
PS:地图用的比较多
扩展:
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/7goto
知识点
:
wx.navigateTo({url:"url地址"})
<navigator url='url地址'>xxx</navigator>
open-type
属性能够关注一下:先看一下目录结构:
index页面
<view class='container'> <view> <navigator url='{{url}}' hover-class='hover'>连接跳转</navigator> </view> <view hover-class='hover' bindtap='to_page' data-url='{{url}}'>方法跳转</view> <view hover-class='hover' bindtap='goto_page' data-url='{{url2}}'>带参跳转</view> </view>
index脚本:
Page({ data: { name: '小明', age: 22, url: '../1data/update_info', url2: './main' }, onLoad: function(options) { }, to_page: e => { // 页面跳转 wx.navigateTo({ url: e.currentTarget.dataset.url }) }, goto_page: function(e) { var that = this; // 页面跳转 wx.navigateTo({ url: `${e.currentTarget.dataset.url}?name=${that.data.name}&age=${that.data.age}` }); } })
main页面:
<view class='container'> <view>{{name}}</view> <view>{{age}}</view> </view>
main脚本:
Page({ data: {}, onLoad: function(pms) { console.log(pms); var that = this; // 设置data值 this.setData({ name: pms.name, age: pms.age }); } })
动态演示:
这些东西都是用API,算是比较简单的了,就是找起来麻烦点,时间不早了,地图这块我再贴一个案例就先结束吧
源码:https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/8map
知识点
:
wx.getLocation({success:成功执行的方法,fail:失败执行的方法})
:获取经纬度wx.openLocation({latitude: 经度值, longitude: 纬度值})
:显示对应位置的地图wxml:
<view> <button bindtap='get_location'>{{demo1}}</button> <button bindtap='open_location'>{{demo2}}</button> </view>
js源码:
Page({ data: { demo1: '获取经纬', demo2: '打开地图', lon: 120.636146, lat: 31.25893 }, onLoad: function(options) {}, // 须要使用this的时候,最外面方法老老实实写function() get_location: function() { var that = this; // 获取经纬度 wx.getLocation({ // 成功的时候 success: res => { console.log(res.latitude, res.longitude, res.speed, res.accuracy); // 更新页面数据 that.setData({ lon: res.longitude, lat: res.latitude }); // 弹框提醒 wx.showToast({ title: `(${res.longitude},${res.latitude})`, // ES6语法 icon: 'none' }); }, // 失败的时候 fail: ex => { // 弹框提醒 wx.showToast({ title: '定位未受权,请从新受权:\r\n删除小程序后再打开', icon: 'none' }); } }); }, // 打开位置 open_location: function() { var that = this; // 打开位置 wx.openLocation({ latitude: that.data.lat, longitude: that.data.lon }); } })
简单说下成功以后的参数含义:
res.longitude
:经度res.latitude
:纬度res.speed
:移动速度(实时定位的时候用的多)res.accuracy
:精确度(通常低于50,经纬数据就误差太多)失败摸拟:
成功摸拟:
额外说明:须要配置一下你须要使用的权限
PS:受权以后,在开发的时候能够清楚状态(现实中从新受权须要删除小程序再打开
)
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html
先看下简单案例的扩展:
在打开地图的时候指定address
能够更人性化显示:
Page({ data: { lon: 120.674297, lat: 31.324571 }, open_location: function() { var that = this; // 打开位置 wx.openLocation({ latitude: that.data.lat, longitude: that.data.lon, // scale: 10, // 缩放级别(5~18)默认是18 address: '江苏省苏州市工业园区都市花园' // 这个信息能够经过地图api逆向解析 }); } })
效果:
知识点
:
show-location
:显示当前定位点markers
:多个标识bindmarkertap
:标记点击事件width:100%;height:100vh
wxml:
<view> <map longitude='{{lon}}' latitude='{{lat}}' markers='{{markers}}' show-location='true' bindmarkertap='makertap' style='width:100%;height:100vh'></map> <!-- --> </view>
JS:
Page({ data: { lon: 120.674297, lat: 31.324571, markers: [] }, // 页面加载 onLoad: function() { var that = this; // eg:能够经过baidu Map获取到markers信息 // BMap.regeocoding({success: ret => {ret.wxMarkerData}}); // 假设经过API获取到了数据 that.setData({ markers: [{ id: 0, latitude: that.data.lat, longitude: that.data.lon, address: '江苏省苏州市工业园区都市花园', iconPath: '/images/marker_red.png', callout: { 'content': '江苏省苏州市工业园区都市花园', 'bgColor': '#fff', 'color': '#f00', 'padding': 15, 'display': 'ALWAYS', // BYCLICK:点击显示 'borderRadius': 5 } }] }); }, // 标记点击事件 makertap: function(e) { var that = this; // 提示 wx.showToast({ title: `点击了标记点${e.markerId}`, icon: 'none' }); // 能够根据e.markerId获取marker信息 console.log(that.data.markers[e.markerId]); } })
动态演示:
PS:能够经过经纬信息来获取对应的位置信息(最后一个百度地图的demo里有贴
)
官方文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation
我还写了一个惯连的案例,这边就不演示了,给你们课后自测吧:
PS:在使用外部连接的时候须要添加到白名单中(补充说明里有贴哦~)
开发的时候能够在手机中预览,也能够真机调试把输出信息直接显示到PC端:
手机调试能够打开调试模式:
以后的操做都会记录,并且控制台输出也会显示:
有了AppID,并不能够开发,还须要是开发者|管理员:
在没有上线前,职工开发和体验成员使用:
在使用外部连接的时候须要添加到白名单中(网站必须备案过)
先要上传代码:
这时候能够选择
PS:提交核审后就能够上线了(不推荐把本身作的demo提交核审,腾讯会处罚的~)
如今小程序提供了云开发
的API(能够当作数据库
+文件上传下载
)感兴趣的能够先了解下:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
时候不早了,建议你们明天再看这篇文章(待续...)