作者：royluck，来自他的博客：

项目结构：（分为全局结构和局部结构）

微信自动生成项目

==>全局结构：

上述结构是微信小程序创建项目时，自动生成的项目结构，其中的app.json、app.js和app.wxss都是全局文件，即在上述三个文件不管修改的是样式还是动作，都可以在全局中调用。

app.js：为动作文件，定义相关js函数

app.json：为环境文件，配置相关环境（注：app.json文件内容即使为空，也必须加" {  } "符号，否则报错）

app.wxss：为样式文件，相当于css文件

utils文件：可以理解为时间插件文件，输出相关时间格式

==>局部结构：（创建单页）

快速创建单页结构的方法：在全局的app.json文件中，定义如下变量然后保存，即可自动创建单页结构。

上述pages数组中，单页的申明（哪个路径排在第一，刷新后呈现的为这个路径文件）

单页结构

sign.wxml：为结构文件，相当于html文件

---

js、json、wxml、wxss：

==>js：

状态机

==>app.json（全局环境配置）：

定义页面底部目录栏目

...,
"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",     //路径文件
        "text": "效果图",    //目录名称
        "iconPath": "../../images/icon_API.png",    //图标（未被选中）
        "selectedIconPath": "../../images/icon_API_HL.png"          
        //图标（被选中）
    },{    
        "pagePath": "pages/todos/todos",
        "text": "TodoApp",
        "iconPath": "../../images/icon_API.png",
        "selectedIconPath": "../../images/icon_API_HL.png"
    },{
        "pagePath": "pages/Me/index",
        "text": "Me",
        "iconPath": "../../images/icon_API.png",
        "selectedIconPath": "../../images/icon_API_HL.png"
    }]
}

列表渲染 wx:for

官网手册

---

index.js

index.wxml

效果图

条件渲染 wx:if

wx:if
wx:elif
wx:else

---

<view wx:if={{length>5}} >1</view>
<view wx:elif={{length<5}}>2</view>
<view wx:else>3</view>

---

<view wx:if={{length>5}} >1</view>
<view wx:elif={{length<5}}>2</view>
<view wx:else>3</view>

app.json

"networkTimeout":设置超时时间

"debug":设置是否开启debug模式(调试信息以info的形式给出)

注:page.json只能设置window相关配置项目，无需鞋window这个关键字

app.js(逻辑层)

1.添加app和page方法，进行程序和页面的注册

2.增加getApp和getCurrentPage方法，分别用来获取App实例和当前页面栈

---

App({ })只能存在一个(在app.js文件里面)

getApp( )在其它js文件上调用获取上述App内定义的方法或变量

常用api

wx.navigateTo()

wx.redirectTo()

wx.setNavigationBarTitle()

wx.navigateBack()

wx.stopPullDownRefresh()

---

wx.showNavigationBarLoading()

wx.hideNavigationBarLoading()

---

wx.showToast()

wx.getStorageSync()

数据请求汇总

get请求

function fetchGet(url, callback) {
    // return callback(null, top250)
    wx.request({
        url: url,
        header: { 'Content-Type': 'application/json' },
        success (res) {
            callback(null, res.data)
        },
        fail (e) {
            console.error(e)
            callback(e)
        }
    })
}

post请求

function fetchPost(url, data, callback) {
    wx.request({
        method: 'POST',
        url: url,
        data: data,
        success (res) {
            callback(null, res.data)
        },
        fail (e) {
            console.error(e)
            callback(e)
        }
    })
}

下拉刷新：

getData: function() {
    var that = this;
    var tab = that.data.tab;
    var page = that.data.page;
    var limit = that.data.limit;
    var ApiUrl = Api.topics +'?tab='+ tab +'&page='+ page +'&limit='+ limit;
    that.setData({ hidden: false });
    Api.fetchGet(ApiUrl, (err, res) => {
        //更新数据
        that.setData({
            postsList: that.data.postsList.concat(res.data.map(function             (item) {
                item.last_reply_at = util.getDateDiff(new                                Date(item.last_reply_at));
                return item;
            }))
        });
        setTimeout(function () {
        that.setData({ hidden: true });
    }, 300);
}

上拉加载：

lower: function() {
    console.log('滑动底部加载', new Date());
    var that = this;
    that.setData({
        page: that.data.page + 1
    });
    if (that.data.tab !== 'all') {
        this.getData({tab: that.data.tab, page: that.data.page});
    } else {
        this.getData({page: that.data.page});
    }
}

关键词汇总

this.data.变量名

this指向page({  })

.data指向内部的data : { }

变量名指向声明的变量名

---

e.detail.value

指向控件input的值

---

e.target.dataset.变量名

e.currentTarget.dataset.变量名

注意：上述的target和currentTarget存在区别，currentTarget指向当前控件，target可能指向向上冒泡的控件

源代码下载网站推荐