微信小程序开发个人笔记

1,配置文件.json 小程序的全局配置app.json和页面配置page.json 每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项。 如下:是一个包含了所有...

1,配置文件.json


小程序的全局配置app.json和页面配置page.json


每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项。


如下:是一个包含了所有配置选项的简单配置app.json


"pages": [//设置页面的路径


"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合


"pages/logs/logs"


],


"window": { //设置默认窗口的表现形式


"navigationBarBackgroundColor": "#ffffff",//顶部导航栏背景色


"navigationBarTextStyle": "black",//顶部导航文字的颜色 black/white


"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字


"backgroundColor": "#eeeeee", //窗口的背景色


"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light


"enablePullDownRefresh":"false",//是否支持下拉刷新 ,不支持的话就直接不写!


"disableScroll":true,// 设置true不能上下滚动,true/false,注意!只能在page.json中有效,无法在app.json中设置该项。


},


"tabBar": { //底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个


"list": [{//设置tab的属性,最少2个,最多5个


"pagePath": "pages/index/index",//点击底部tab跳转的路径


"text": "首页",//tab按钮上的文字


"iconPath":"../img/a.png",//tab图片的路径


"selectedIconPath": "../img/a.png"//tab在当前页,也就是选中状态的路径


}, {


"pagePath": "pages/logs/logs",


"text": "日志"


}] ,


"color":"red",//tab的字体颜色


"selectedColor":"#673ab7",//当前页tab的颜色,也就是选中页的


"backgroundColor":"#2196f3",//tab的背景色


"borderStyle":"white",//边框的颜色 black/white


"position":"bottom"//tab处于窗口的位置 top/bottom


},


"networkTimeout": {//默认都是60000秒一分钟


"request": 10000,//请求网络超时时间10000秒


"downloadFile": 10000,//链接服务器超时时间10000秒


"uploadFile":"10000",//上传图片10000秒


"downloadFile":"10000"//下载图片超时时间10000秒


},


"debug": true//项目上线后,建议关闭此项,或者不写此项


}


2,逻辑层.js


小程序的逻辑层是js编写,但因为小程序不是运动在浏览器中,所以js在web中的一些功能不能用,如document,windows等 。


app.js有全局的小程序生命周期,page.js有自己本页面的生命周期


2.1 注册小程序App.js


注意:


1,必须在app.js中注册微信小程序,全局只有一个


2,不能再定app()内的函数中调用getApp(),使用this就可以拿到app的实例。


3,不要在onLaunch的时候getCurrentPage(),此时page还没有生成


4,通过其他子页面调用getApp()获取实例后,不要私自调用小程序全局的生命周期方法


5,var app=getApp()获取小程序的实例


App ( {


// 小程序生命周期的各个阶段


onLaunch: function(){},//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)


onShow: function(){},//当小程序启动,或从后台进入前台显示,会触发 onShow


onHide: function(){},//当小程序从前台进入后台隐藏,会触发 onHide


onError: function(){},//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息


// 自定义函数或者属性,用 this可以访问


...


})


2.2 注册小程序的页面page.js


Page()用来注册一个页面,维护该页面的生命周期以及数据。


Page({


data: {//页面的初始数据//调用:{{text}} {{array[0].msg}}


text: 'init data',


array: [{msg: '1'}, {msg: '2'}]


},


// 页面生命周期的各个阶段


onLoad: function(){},//生命周期函数--监听页面加载


onShow: function(){},//生命周期函数--监听页面初次渲染完成


onReady: function(){},//生命周期函数--监听页面显示


onHide: function(){},//生命周期函数--监听页面隐藏


onUnload: function(){},//生命周期函数--监听页面卸载


onPullDownRefresh: function(){},//页面相关事件处理函数--监听用户下拉动作,需要 在app.json中配置 "enablePullDownRefresh":"true" 允许上拉刷新


onReachBottom: function(){},//页面上拉触底事件的处理函数


onShareAppMessage: function(){//用户点击右上角分享


return {


title: '自定义分享标题',


desc: '自定义分享描述',


path: '/page/user?id=123'


}


},


// 自定义函数或者属性如:


customData: { hi: 'MINA' }


...


})


2.3,注意事项


setData()


不能直接数据 ,this.data.text="xxxxx" //这是错误的,


this.setData ({ //在这里面修改数据的值,和react的setdata有些类似})//这是正确的


这里记住this有作用域的问题 ,如在局部函数中使用需.bind(this),或其他


getApp()


如果需要全局的数据可以在app.js中设置。如:


App({// app.js


globalData: 1


})


// 某page.js


console.log(getApp().globalData)


2.4,公共模块util.js


公共模块方法需要通过module.exports对外暴露接口。


使用的时候需要require(path)将文件引入。如:


function sayHello(name) {//公共方法util类


console.log(`Hello ${name} !`)


}


module.exports.sayHello = sayHello//用module.exports 对外暴露接口


//先引入文件,是新建的一个utils包,公共方法在util.js里面


var util = require('../../utils/util.js')


Page({//调用类


onLoad: function () {// 使用时,用util引用名调用,如:util.sayHello()


util.sayHello('我是传的值');


}


})


3,视图层WXML


视图层的数据绑定 均来自于Page中的data,修改值则是this.setData


数据绑定使用{{变量}}双大括号将变量包起来


**条件渲染**


123334


123334


大于5我就显示了 


//这是一个if if else的判断


1 //如果大于5显示1


2 //否则如果大于2显示2


3 //否则显示3


//block只是一个包装元素,并不会在页面上做任何渲染,只受属性控制。


view1 


view2 



wx:if vs hidden


wx:if 是惰性的,运行时不渲染,


《hidden 组件始终渲染,只是简单的显示隐藏,如果需要频繁切换则用hidden》


**列表渲染**


view wx:for="{{array}}"> {{index}}:{{item}} //默认index是当前下标的变量名,数组当前项是item,如果是object类型则是item.xxx


也可以另取名用wx:for-index=“xx”来指定当前数组下标的变量名


wx:for-item="xx" 来指定当前元素的变量名


//输出的结果是0:1,1:2,2:3,3:4,4:5


page.jsPage({ data: { array: [1, 2, 3, 4, 5] }})


block wx:for


类似block wx:if,也可以将wx:for用在标签上


**wx:kay **


如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态使用wx:kay


wx:kay 有两种形式提供


1,字符串 wx:kay=“unique”


2,保留关键字 wx:kay="*this"


**算法运算**


{{a + b}} + {{c}} + d 


**字符串运算**


{{"hello" + name}}


也可以用扩展运算符 ... 来将一个对象展开


{{...obj1}} //a:1,b:2 可以把obj对象完全展开


obj1: {


a: 1,


b: 2


},


注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面


3.1,wxml模版的使用


name定义组件模版的名称,引用模版的时候使用is属性指定模版的名字,is可以进行简单的三木运算。需要传入模版需要的data数据。因为模版拥有自己的作用域,所以只能使用data传入数据,而不能直接{{}}使用。


// 某个模板



{{index}}: {{msg}} 


Time: {{time}} 




----------------------------------


使用时:


//data里面需要传入name为msgItem 模板中所需要的值


3.2,WXML公共模块的引用


WXML提供两种文件引用方式1,import 。 2,include


如下:


import有作用域的概念,不可以A import C,可以A import B,



//使用import标签




A template 



include可以多重引用


//引用header、其中header.wxml中也引用了footer.wxml


body 



header 



3.2,事件


1, bind开头不阻止冒泡,用catch开头可以阻止冒泡。如catchtap~


冒泡的定义:点击子组件会触发父组件,所有父组件,先子后父的触发


2,无特殊情况自带事件的各个事件对象以及对象属性列表


3,dataset,在wxml组件中可以定义data数据,会通过事件传递。以data-开头,多个单词以为-链接,如data-a-b,但是不能有大写,它会自动转成驼峰命名,调取的时候去驼峰命名的名字。


4, wxss


用法类似于css,扩展尺寸单位和样式导入


1,尺寸单位rpx,1rpx=0.5px。


2,样式导入。以逗号结束。


@import "common.wxss";//引入的时候import后面跟引入文件的相对路径


可以使用内联样式,但不建议,会影响渲染速度。


page.wxss的样式会覆盖全局样式app.wxss


5,组件


1,所有组件和属性都是小写,以-连接


2,image默认宽300px高度225px


3,~~和html类似(巴拉巴拉)

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
桦仔

技术工程师

3 篇文章

作家榜 更多

  1. 李得胜 22 文章
  2. 新媒广告价 17 文章
  3. admin 16 文章
  4. 唱歌跑调的女生 12 文章
  5. 步非+烟花  12 文章
  6. 墨尔本情  12 文章
  7. 非帅不可 12 文章
  8. 有头猪在看我 11 文章