One Hundred Years of Solitude

扬帆,启航!

微信小程序开发

微信小程序开发,文档主要看微信官方文档微信小程序官方文档
辅助网址可以看小程序社区

导航栏标题

与iOS开发很相似,小程序的导航栏也可以全局设置一下,在公共文件app.json中设置了导航栏相关样式如下:

这个地方是全局设置,如果想要在不同的页面设置各自的标题属性,只需要在该子级文件中设置

子页面调用公共js对象以便调用其方法

子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下 //app.js 中写子页面需要调用的公共方法

嵌套循环时候,最好重命名下list和index

善用公共模板

在APP开发中,UI复用是一个很好的手段,在小程序上就是模板template。 在逛小程序联盟的时候发现了一个大湿总结的比我好,搬过来一下。

微信小程序中,如果几个页面中需要引用同一个header/footer,当定义了公共模板时,有两种引用方法如下: 方法一:在公共模板中定义template元素,利用 方法 ,这种方式只会显示公共模板的template里面的内容,之外的内容不会显示

注意:这里的data='{{引入的数据1,引入数据2}}’ 是在template中要提取js文件中的data数据里面的key名字,否则无法显示。 公共模板的wxml:在公共模板中必须定义每一个template的的name的名字,否则引用的时候无法得知引用具体某一个;

要引用的文件js定义数据:

** 方法二:**

公共模板的wxml:

{{title.other}} js定义的数据:

总结:
import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容,
显而易见,include方式更简单一些,在wxml中只需要一句话即可。
5.小程序的尺寸单位rpx rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px。
具体的这里有一片文章介绍的很详细,还有这个

小程序中用html、css

小程序中的选择器跟css的一样. 1:.class 2: #id 3: element 4:分组 element,element 5:伪类选择器 :after :before 注意这里加入在了元素之内的最后/最前

引入外部css文件的时候,只需像iOS中导入文件那样,在其css文件的开始写上 : @import “外部地址” 即可。 html中布局用div很多,但是在小程序中用view标签,文本用text。 如果想用html原有的元素,必须在wxss中定义元素的display:block不然无法应用,且html元素的id选择器是无法应用的。

事件总结/冒泡事件

小程序的事件主要有: touchtab 点击事件 touchstart 开始滑动 touchmove 滑动中 touchend 滑动结束 touchcancel 滑动中断

小程序中的wxml中绑定事件有两种:以touchtab为例 ,在wxml中必须有bind/catch不然无法实现上述事件 bindtouchtab和catchtouchtab bind的不会阻止事件冒泡(元素最里层到最外层函数执行),catch会阻止冒泡,只是冒泡到当前层结束 如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置,查看滑动位置也可以通过touchstart和和touchend的clientx/y获取

点击更换图片

锚点定位

注:scroll-view必须要设置高度,不然无效

调用工具js文件/utils文件中的函数/变量

在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤:
1:在utils被调用的js文件中,面向对象的方式模型输出: module.exports={要调用的函数名称:要调用的函数名称 };
2:在要调用的js文件中模块化引入utils的js文件 var object=require(“utils被调用的js文件地址”);
可以输出一下object就能看到被调用的方法了; 例子如下: utils中被调用的js:

后台交互/wx.request({})方法/渲染页面方法 解析

小程序的后台获取数据方式get/post具体函数格式如下:wx.request({})

wxml页面:

scroll-view用法

广告轮播

微信小程序广告轮播元素 图片所在元素/swiper-item> 其中属性有: autoplay:true,//是否自动播放 autoplaytxt:”停止自动播放”, indicatorDots: true,//指示点 // indicator-color:”white”,//指示点颜色 暂未启动 // indicator-active-color:”red”,//当前选中的指示点颜色暂未启动 indicatorDotstxt:”隐藏指示灯”, interval: 1000,//图片切换间隔时间 duration: 500,//每个图片滑动速度, circular:true,//是否采用衔接滑动 current:3,//初始化时第一个显示的图片 下标值(从0)index

图片更改事件:bindchange=’imgchange’ imagechange()的e.detail.current为当前显示页面的下标值 wxml:

wxjs:

wxss: 

提示框

第二种方式:
// 提交成功 ~~~javascript this.setData({ loadingHidden: true, hideCommitSuccessToast: false })
// 定时,3秒消化 setTimeout(() => { this.setData({ hideCommitSuccessToast: true }) }, 3000)

点赞

发表评论

电子邮件地址不会被公开。