E企盈营销工具技术服务商 热线:4006-838-530

微信小程序基础语法总结

E企盈直播平台营销卖货系统

放一些微信小程序社区教程demo的链接供大家参考:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4811&extra=page%3D1%26filter%3Dtypeid%26typeid%3D60http://www.wxapp-union.com/微信小程序官方api说明文档:https://developers.weixin.qq.com/miniprogram/dev/api/ 配置文件app.json的配置(全局){// 用来配置页面的路径”pages”:[“pages/index/index”, // 首页”pages/Test/Test” // 跳转的页面],”window”:{“enablePullDownRefresh”: true, // 是否支持下拉刷新”backgroundTextStyle”:”dark”, // 下拉刷新的字体颜色,支持light”backgroundColor”: “#e04c4c”, // 设置下拉刷新的背景颜色”navigationBarBackgroundColor”: “#fff”, // 设置微信程序顶部导航栏颜色”navigationBarTitleText”: “yejiawei”, // 顶部导航栏文字”navigationBarTextStyle”:”black” // 顶部导航栏文字样式,black或者white”onReachBottomDistance”: 50 // 设置上拉事件触发时距离底部的位置},”tabBar”: { // 设置tab切换栏的配置”list”: [{“pagePath”: “pages/index/index”, // 跳转的路径”text”: “首页”, // tab的文字”iconPath”: “/images/t1.jpg” // 设置背景图路径},{“pagePath”: “pages/Test/Test”,”text”: “测试”,”selectedIconPath”: “/images/t1.jpg” // 设置选中时图片的路径}],”color”: “#e04c4c”, // 设置tab按钮字体颜色”selectedColor”: “#000″, // 设置按钮选中的颜色”backgroundColor”: “#1aad16″, // 设置tab按钮的背景颜色”borderStyle”: “black”, // 设置tabbar边框颜色,只支持black/white”position”: “top” // 设置tabbar的位置,设置为top无法显示图片},”networkTimeout”: {“request”: 10000, // request请求的超时时间”connectSocket”: 10000, // connectSocket的超时时间”downloadFile”: 10000, // 下载文件的超时时间”uploadFile”: 1000 // 上传文件的超时时间},”debug”: true // 开启debug模式,在控制台输出程序信息}page.json的配置(页面)设置的配置用来覆盖app.json中的window配置{“navigationBarBackgroundColor”: “#ffffff”, // 设置微信程序顶部导航栏颜色”navigationBarTextStyle”: “black”, // 顶部导航栏文字样式,black或者white”navigationBarTitleText”: “微信接口功能演示”, // 顶部导航栏文字”backgroundColor”: “#eeeeee”, // 设置下拉刷新的背景颜色”backgroundTextStyle”: “light”, // 下拉刷新的字体颜色,支持light”enablePullDownRefresh”: true, // 是否支持下拉刷新”disableScroll”: true, // 是否支持滚动”onReachBottomDistance”: 50 // 设置上拉事件触发时距离底部的位置}程序入口函数(App)App({onLaunch: function (options) {// 程序加载调用},onShow: function (options) {// 从后台进入前台调用,默认程序第一次加载回调用},onHide: function () {// 从前台切换到后台调用},onError: function (msg) {// 程序报错调用},myFunc: function() {// 自定义函数},globalData: {// 全局自定义数据userInfo: “yejiawei”}})上面的onLaunch和onShow方法都有options参数,options参数里面有如下属性{path: “pages/index/index” // 程序打开的路径query: {}, // 当调用wx.navigateTo可以传递queryscene: 1001, // 打开小程序的场景值referrerInfo: { // 从其他程序中进入到此程序,会返回此字段appId: …, // 其他程序的appIdextraData: … // 其他程序传递过来的数据}}可以使用 var app = getApp(); 来获取小程序实例,console.log(app.globalData.userInfo)页面的入口函数(Page)Page({data: {msg: “haha” // 页面的状态},onLoad: function(options) { // 页面加载完毕触发 },onReady: function() { // 页面渲染完毕触发 },onShow: function() { // 页面开始渲染触发 },onHide: function() { // 页面切换到后台触发 },onUnload: function() { // 页面卸载触发 },onPullDownRefresh: function() { // 页面下拉刷新触发},onReachBottom: function() { // 页面上滑触底触发 },onShareAppMessage: function () {// 页面点击转发触发,需要return一个object,只有定义了此方法,才会有转发的功能return {title: “分享的页面”, // 分享页面的标题path: “/pages/logs/logs” // 分享的页面的路径}},onPageScroll: function(options) { // 页面滚动触发 },myFn: function() { // 自定义函数console.log(this.route); // 获取当前页面的路径this.setData({ // 修改状态msg: “haha”}, function() {// 状态修改完,调用此方法})console.log(getCurrentPages()); // 获取当前页面栈实例}customData: { // 自定义属性 }})页面路由方法wx.navigateTo(object) 跳转到指定的页面,无法跳转到tabbar页面(当前页保留)wx.navigateTo({url: ‘/pages/logs/logs?id=1‘, // 页面路劲,可以传递query参数success: function() { // 导航成功执行console.log(“跳转成功”);},fail: function() { // 导航失败执行console.log(“跳转失败”);},complete: function() { // 导航完成调用console.log(“导航结束”);}})方法wx.navigateBack(object) 返回到之前的页面wx.navigateBack({delta: 2 // 后退2步})方法wx.redirectTo(object) 销毁当前页面,跳转到指定的页面,不能跳转到tabbar页面使用方法和navigateTo一样方法wx.reLaunch(object) 销毁所有页面,跳转到任意指定的页面使用方法和navigateTo一样方法wx.switchTab(object) 跳转到tabbar页面使用方法和navigateTo一样模块化js文件可以使用exports和module.exports暴露接口exports是module.exports的一个引用function fn () {console.log(“导入的方法执行了”);}exports.fn = fn;使用文件中的方法var common = require(‘../common.js‘);common.fn();WXML文件细节状态绑定变量使用双大括号包裹 view{{msg}}/view标签的属性使用双引号包裹 view id=”item”/view双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号绑定对象,不需要对象的花括号 template is=”mytemplate” data=”{{ a: 1, b: 2 }}”/template列表遍历view wx:for=”{{[1,2,3,4,5]}}” wx:key=”{{item}}”{{index}}: {{item}}/view给index和item取别名view wx:for=”{{[1,2,3,4,5]}}” wx:for-index=”myIndex” wx:for-item=”myItem”{{myIndex}}: {{myItem}}/view渲染多节点代码块block wx:for=”{{[1, 2, 3]}}”view {{index}}: /viewview {{item}} /view/block遍历字符串view wx:for=”array”{{item}}/view绑定key,当组件重排后根据id可以复用组件和组件的状态block wx:for=”{{[1, 2, 3]}}” wx:key=”this” // 当item是字符串或者数字可以使用this代表item作为keyview {{index}}: /viewview {{item}} /view/block条件渲染view wx:if=”{{false}}”haha/viewview wx:elif=”{{true}}”haha1/viewview wx:else=”{{false}}”haha2/view同样也可以使用block来控制多节点代码块模板声明一个模板template name=”mytemplate”view{{a}}: {{b}}/view/template使用此模板 obj: { a: 1, b: 2 }template is=”mytemplate” data=”{{…obj}}”/template事件使用bindtap绑定事件 view bindtap=”fn” data-my-data=”222″/view事件对象myFn: function(event) {console.log(event);// 使用data开头的自定义属性,将保存再event.currentTarget.dataset中}事件分类冒泡事件touchstart 开始触摸touchmove 触摸移动touchcancel 触摸打断touchend 触摸离开tap 瞬间触摸longpress 超过350ms的触摸transitionend 过渡结束animationstart 动画开始animationiteration 动画执行一遍后触发animationend 动画结束触发非冒泡事件,除了上述事件以外都是非冒泡事件绑定事件可以使用bind和catch绑定bindtap或者bind:tap 不阻止冒泡catchtap或者catch:tap 阻止冒泡在WXML文件中导入其他WXML文件可以将上面讲的template代码,放到一个单独的wxml文件中,然后在当前文件中使用 import src=”../common.wxml” / 导入,就可以立即使用了而include src=”../common.wxml” /的作用,是将除了template和wxs以外的代码,都拷贝到include所在的位置wxs的使用(代码可以单独写在wxs文件中,也可以写在wxs标签中)模块wxs的作用其实和js文件的作用是一样的,只不过提供了另外一种方式来写js外界要访问wxs中定义的代码需要使用module.exports导出创建一个wxs文件,定义如下代码var message = “你好吗?”;module.exports.message = message;在wxml文件中使用首先使用wxs标签导入 wxs src=”../common.wxs” module=”wxsData”/使用 view class=”demo”{{wxsData.message}}/view在其他wxs文件中使用var wxsData = require(“../common.wxs”);WXSS文件尺寸单位使用rpx,一个rpx就代表一个物理像素导入其他WXSS文件 @import “../common.wxss”;自定义组件(和vue里面的组件类似)创建自定义组件的步骤第一步,修改json修改json文件为 { “component”: true }第二部,WXML文件书写view class=”demo” {{text}} /viewslot/slotslot就是插槽,和vue的一样第三步,WXSS中书写.demo{ color: red; }只能使用类选择器第四部,js文件中写Component({properties: {// 组件的属性,可以指定类型和默认值,和vue的props验证很像text: {type: String,value: ‘默认值‘,}},data: {// 组件的状态someData: {}},methods: {// 组件的自定义方法customMethod: function () { }}})第五步,使用组件在要使用此自定义组件的page中,修改他的json,插入如下字段”usingComponents”: {“my-component”: “../myComponent/myComponent”}在page组件中使用 my-component/my-component 即可同时可以使用 my-component text=”我是传递的属性”/my-component 传递属性值给组件内部WXML文件的细节写法和一般的WXML文件写法一致,不过多了slot没有名字的slot只能有一个,如果要使用多个slot,需要操作如下几步第一步,在js中的Component函数中,添加如下options: {multipleSlots: true},第二步,在WXML中写多个带名字的slotview class=”demo” {{text}} /viewslot name=”a”/slotslot name=”b”/slot第三步,在页面中使用my-component text=”我是传递的属性”view slot=”a”我是a/viewview slot=”b”我是b/view/my-componentWXSS文件的细节只能使用类选择器可以继承组件外的样式app.wxss文件中定义的样式,对组件无效另外可以使用:host来定义组件标签的样式:host{ color: black; }js文件的细节Component函数的使用如下Component({properties: { // 设置组件接受的属性myProperty1: { // 属性名type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)value: ‘‘, // 属性初始值(可选),如果未指定则会根据类型选择一个observer: function(newVal, oldVal){ // 监听属性值改变的函数 }},myProperty2: String // 简化的定义方式},data: {}, // 组件状态methods: { // 设置方法onMyButtonTap: function(){console.log(this.id); // 组件标签的idconsole.log(this.dataset); // 组件的data自定义属性集合console.log(this.data); // 组件的属性和状态的集合console.log(this.hasBehavior()) // 组件是否有behavior属性this.setData({}) // 属性和状态都可以设置/*可以手动触发组件的自定义事件,比如,组件上绑定了一个自定义事件my-component bindmyEvent=”myFn”/my-component要手动触发myEvent,需要调用this.triggerEvent(‘myEvent‘, {// 事件参数}, {bubbles: true, // 是否冒泡composed: true, // 到父组件内部寻找同名事件capturePhase: true // 是否捕获});/}},created: function(){}, // 组件在内存中创建完毕执行attached: function(){}, // 组件挂载之前执行ready: function() {}, // 组件挂载后执行detached: function(){}, // 组件移除执行moved: function(){}, // 组件移动的时候执行relations: {/嵌套的组件需要相互关联就要使用此字段相同嵌套子节点的处理方式假设嵌套的html结构如下custom-ulcustom-li item 1 /custom-licustom-li item 2 /custom-li/custom-ul则custom-li组件中需要定义如下的relations‘./custom-ul‘: { // 嵌套父组件的路径type: ‘parent‘, // 关联的目标节点应为父节点linked: function(target) { }, // custom-li插入到custom-ul时执行,target是custom-ullinkChanged: function(target) { }, // custom-li被移动后执行,target是custom-ulunlinked: function(target) { } // custom-li被移除时执行,target是custom-ul}在custom-ul组件中也要定义此字段,只不过反过来 type 改成 child不同嵌套子节点的处理方式custom-divcustom-span item 1 /custom-spancustom-div item 2 /custom-div/custom-div此时就要使用behavior作为公共的节点路径了,假设custom-span和custom-div都有一个名为customFormControls的behaviorcustom-span和custom-div内部定义relations的方式和之前一样,只不过将type改成ancestorcustom-div中定义‘customFormControls‘: {type: ‘descendant‘, // 关联的目标节点应为子孙节点target: customFormControls}/},behaviors: [/behaviors的作用就是用来创建一个公用的组件js,内部代码和Component一模一样Behavior({ //… })主要用来和当前的Component代码合并,同名的属性以当前组件的为主*/]})按需加载实现按需加载的步骤如下主包中应只包含tabbar第一步,在项目根目录下创建分包的文件夹,将分包的page写在里面第二步,在app.json中添加如下配置”subPackages”: [{“root”: “package1″, // 分包文件夹根路径”pages”: [ // 分包中包含的路径,不能添加到app.json的page中”pages/Demo/Demo”]}]在tabbar配置项中,不能应用分包的页面第三步,使用分包文件在tabbar的页面中,引用分包页wx.navigateTo({url: ‘../../package1/pages/Demo/Demo‘})转载自:https://www.jianshu.com/p/4a618a441d1c    作者:Q轩哥

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序基础语法总结
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏