用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序初接触

天下雪 2017-1-12 00:26

作者:royluck,来自他的博客:http://www.jianshu.com/p/f4f48d026e96项目结构:(分为全局结构和局部结构)微信自动生成项目==全局结构:上述结构是微信小程序创建项目时,自动生成的项目结构,其中的app.json、ap ...

作者:royluck,来自他的博客:http://www.jianshu.com/p/f4f48d026e96

项目结构:(分为全局结构和局部结构)

微信自动生成项目

==>全局结构:

上述结构是微信小程序创建项目时,自动生成的项目结构,其中的app.jsonapp.jsapp.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(全局环境配置):

定义页面底部目录栏目


  1. ...,
  2. "tabBar": {
  3. "list": [{
  4. "pagePath": "pages/index/index", //路径文件
  5. "text": "效果图", //目录名称
  6. "iconPath": "../../images/icon_API.png", //图标(未被选中)
  7. "selectedIconPath": "../../images/icon_API_HL.png"
  8. //图标(被选中)
  9. },{
  10. "pagePath": "pages/todos/todos",
  11. "text": "TodoApp",
  12. "iconPath": "../../images/icon_API.png",
  13. "selectedIconPath": "../../images/icon_API_HL.png"
  14. },{
  15. "pagePath": "pages/Me/index",
  16. "text": "Me",
  17. "iconPath": "../../images/icon_API.png",
  18. "selectedIconPath": "../../images/icon_API_HL.png"
  19. }]
  20. }

列表渲染 wx:for

官网手册


index.js

index.wxml

效果图

条件渲染 wx:if


  1. wx:if
  2. wx:elif
  3. wx:else

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

  1. <view wx:if={{length>5}} >1</view>
  2. <view wx:elif={{length<5}}>2</view>
  3. <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请求

  1. function fetchGet(url, callback) {
  2. // return callback(null, top250)
  3. wx.request({
  4. url: url,
  5. header: { 'Content-Type': 'application/json' },
  6. success (res) {
  7. callback(null, res.data)
  8. },
  9. fail (e) {
  10. console.error(e)
  11. callback(e)
  12. }
  13. })
  14. }

post请求

  1. function fetchPost(url, data, callback) {
  2. wx.request({
  3. method: 'POST',
  4. url: url,
  5. data: data,
  6. success (res) {
  7. callback(null, res.data)
  8. },
  9. fail (e) {
  10. console.error(e)
  11. callback(e)
  12. }
  13. })
  14. }

下拉刷新:

  1. getData: function() {
  2. var that = this;
  3. var tab = that.data.tab;
  4. var page = that.data.page;
  5. var limit = that.data.limit;
  6. var ApiUrl = Api.topics +'?tab='+ tab +'&page='+ page +'&limit='+ limit;
  7. that.setData({ hidden: false });
  8. Api.fetchGet(ApiUrl, (err, res) => {
  9. //更新数据
  10. that.setData({
  11. postsList: that.data.postsList.concat(res.data.map(function (item) {
  12. item.last_reply_at = util.getDateDiff(new Date(item.last_reply_at));
  13. return item;
  14. }))
  15. });
  16. setTimeout(function () {
  17. that.setData({ hidden: true });
  18. }, 300);
  19. }

上拉加载:

  1. lower: function() {
  2. console.log('滑动底部加载', new Date());
  3. var that = this;
  4. that.setData({
  5. page: that.data.page + 1
  6. });
  7. if (that.data.tab !== 'all') {
  8. this.getData({tab: that.data.tab, page: that.data.page});
  9. } else {
  10. this.getData({page: that.data.page});
  11. }
  12. }

关键词汇总

this.data.变量名

this指向page({  })

.data指向内部的data : { }

变量名指向声明的变量名


e.detail.value

指向控件input的值


e.target.dataset.变量名

e.currentTarget.dataset.变量名

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





鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: royluck 来自: 原文地址

相关阅读