小程序学习笔记1

小程序官网文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

小程序开发工具：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=2017112

 

 

 

响应的数据绑定

a.wxml

<view>姓名:{{name}}</view>

 

a.js

Page({
data:{
name:"lizixxu",
},
});

文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。

 

文件作用域(全局变量)

 

app.json

globalData:{
    userInfo:null,
    m_global:"glocal data is mine"
  }

 

test.js

var appInstance = getApp();
Page({
    data:{
    m_global:null
    },
 onLoad: function () {
       this.setData({
            m_global:appInstance.globalData.m_global,
        });
    }
})

 

test.wxml

<view>全局变量:{{m_global}}</view>

 

navigator导航

test.wxml

<button bindtap="toIndex">js跳转</button>
<navigator url="../change/change">页面直接跳转</navigator> 

 

test.js

toIndex:function(){
        console.log("点击动作");
        wx.navigateTo({
            url: '../change/change'
        });
    },

 

tips:

Bug & Tip

1. tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

 

模块化(引用全局common.js)

test.wml

<button bindtap="sayhello">hello</button>

 

test.js

   var common = require('../../common/common.js'); 
　　sayhello: function() {
        common.sayHello('MINA');
    },

 

common.js

function sayHello(name) {
  console.log(`sssssssssssss Hello  !`)
}

 

 

点击页面上的hello按钮，则在控制台输出 sssssssssssss Hello  !