一文摸摸小程序的底
写在前面的话: 算不了入门教程, 只能算这几晚的摸索教程, 下次会出一篇一文入门小程序
本文示例源码:
1. 屁话一箩筐
有些同志留言说我消失了, 文章更新频率比以前慢多了? 我这边先统一回复一下:
最近这几个月利用空闲时间把三国读完了(咳, 别问我为什么读, 就是突然想读了)
PS: 有空聊聊呗~
然后最近两个星期迷上了读书, 回头可能会发点读书笔记, 推荐几本不错的书给大家
然后就是上次发文, 修复 Shopee 上传限制的时候使用了下 JQ 来快速实现
PS: 说到底还是个后端偏数据方向的, 也就 JQ 还记得...
然后本着专研的精神, 又把 H5 复习了一下
PS: 几年前曾经在旧博客写过 H5 的读书笔记
本来准备找下思维导图快速过下的, 之后发现... 当时懒了一下, 只是发图, 所以.. 丢包了...
PS: 于是最近几天闲暇之余 W3C 逛的比较多
然后先是改写了上次的脚本, 再写了 H5 的 Markdown 草稿
PS: 过几天你们应该可以看到了, 咳, 人老了~ 容易疲劳.. 让我先缓缓.. 先缓缓
然后专研的毛病又来了, 草稿写到导航和多媒体的时候想用小程序试试, 毕竟现在是小程序的天下了
PS: 之前前给亲戚弄小程序的时候研究了 1 个晚上, 发现不是很难, 然后现在想到了
然后发现~ 前端的东西的确不难, 但是我这人有个毛病: 喜欢追求页面的美感..
于是发现..demo 几分钟搞定了, 为了调个漂亮样式却耗去几小时...
PS: 本来今天可以早点休息的, 于是乎~ 陪大家熬个夜吧...
2. 记录点小程序功能点
我用的不多, 简单引入一下, 小程序 API 用起来很简单的, 更全的可以去官方查看
PS: 唉, 还是 Python 官方文档最省心啊~
话说, 以后还是老老实实先把上面几个系列文章清了再说吧~
PS: 清了以后, 我还会回来的~
2.1. 前言
小程序 | 公众号登录注册页面: https://mp.weixin.qq.com/
这个太简单, 就不浪费时间了, 贴个官方教程:
下载开发工具:
新建个简单项目:
项目基本配置: 一般在详细里面改就行了
文件简单介绍:(图说的很清楚了)
PS: 用法和 CSS 一样, 在小程序中像素单位全部用 rpx(类似于 rem)
rpx: 可以根据屏幕宽度进行自适应, 文档:
- <!--index.wxml-->
- <view class='container'>
- <view class='{{my_class}}'>{{name}}</view>
- <view>{{age}}</view>
- <view>{{work.name}}</view>
- <view>{{work.location}}</view>
- </view>
- //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;
- }
- <!--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": "美国"
- }
- });
- }
- })
- <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
- })
- }
- })
- or
- dom.dataset["自定义属性名"]
- or
- dom.dataset["自定义属性名"] = xxx
- or
- delete dom.dataset["自定义属性名"]
- <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>
- 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;
- }
- view:
- <view class='container'>
- <text > 这是一个测试页面</text>
- </view>
- Page({
- data: {
- title: '欢迎光临'
- },
- onLoad: function(options) {
- // 设置标题
- wx.setNavigationBarTitle({
- title: this.data.title,
- });
- }
- })
- view:
- <view class='container'>
- <view hover-class='hover'>
- <text data-tel='{{tel}}' bindtap='call_tel'>{{info}}{{tel}}</text>
- </view>
- </view>
- Page({
- data: {
- info: "客服电话:",
- tel: "95017"
- },
- onLoad: function(options) {},
- call_tel: function() {
- // 打电话
- wx.makePhoneCall({
- phoneNumber: this.data.tel
- });
- }
- })
- 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... 省略);
- }
- wxml:
- <view class='container'>
- <!-- 高度自适应 -->
- <image class="bg" src="../../images/bg.jpg" mode="widthFix"></image>
- </view>
- wxss:
- .container {
- padding: 0rpx;
- }
- .bg {
- width: 100%;
- }
- <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>
- 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}`
- });
- }
- })
- <view class='container'>
- <view>{{name}}</view>
- <view>{{age}}</view>
- </view>
- Page({
- data: {},
- onLoad: function(pms) {
- console.log(pms);
- var that = this;
- // 设置 data 值
- this.setData({
- name: pms.name,
- age: pms.age
- });
- }
- })
wxml: <view> <button bindtap='get_location'>{{demo1}}</button> <button bindtap='open_location'>{{demo2}}</button> </view>
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 }); } })
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 逆向解析 }); } })
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>
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]); } })
来源: https://www.cnblogs.com/dotnetcrazy/p/10597311.html