微信小程序开发个人笔记

这是一款来自小程序免费开发制作网的小程序demo源码,希望大家喜欢。

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: {//页面的初始数据//调用:<view>{{text}}</view> <view>{{array[0].msg}}</view>
 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
数据绑定使用{{变量}}双大括号将变量包起来

**条件渲染**
 <view wx:if="{{zhenjiaa=='123'}}">123334</view>
 <view wx:if="{{zhanjia}}">123334</view> 
<view wx:if="{{len > 5}}">大于5我就显示了 </view>

//这是一个if if else的判断
<view wx:if="{{length > 5}}"> 1 </view>//如果大于5显示1
<view wx:elif="{{length > 2}}"> 2 </view>//否则如果大于2显示2
<view wx:else> 3 </view>//否则显示3

<block wx:if="{{true}}">//block只是一个包装元素,并不会在页面上做任何渲染,只受属性控制。
  <view> view1 </view>
  <view> view2 </view>
</block>
wx:if vs hidden
wx:if 是惰性的,运行时不渲染,
《hidden 组件始终渲染,只是简单的显示隐藏,如果需要频繁切换则用hidden》



**列表渲染** 
 view wx:for="{{array}}"> {{index}}:{{item}} </view>//默认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用在<block/>标签上
**wx:kay **
如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态使用wx:kay
wx:kay 有两种形式提供
1,字符串  wx:kay=“unique”
2,保留关键字 wx:kay="*this"


**算法运算**
<view> {{a + b}} + {{c}} + d </view>

**字符串运算**
<view>{{"hello" + name}}</view>


也可以用扩展运算符 ... 来将一个对象展开
{{...obj1}} //a:1,b:2   可以把obj对象完全展开
obj1: {
      a: 1,
      b: 2
    },
注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面

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

<template name="msgItem">// 某个模板
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
----------------------------------
使用时:
<template is="msgItem" data="{{...item}}"/>//data里面需要传入name为msgItem 模板中所需要的值

3.2,WXML公共模块的引用
WXML提供两种文件引用方式1,import 。 2,include

如下:

import有作用域的概念,不可以A import C,可以A import B,
<!-- B.wxml -->
<import src="a.wxml"/>//使用import标签

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
include可以多重引用
<include src="header.wxml"/>//引用header、其中header.wxml中也引用了footer.wxml
<view> body </view>

<!-- header.wxml -->
<view> header </view>
<include src="footer.wxml"/>

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类似(巴拉巴拉)

6,API

官网超详细。。。。 (以后再分享demo~~)

——————-以下是开发中的整理——————————-

**navigator相当于a标签**
<navigator url="../index/index">点击跳转不关闭当前页面</navigator>
<navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

本资源来自易用通,如有侵权,请联系站长。

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序开发个人笔记
嘿,投喂下嘛!