微信小程序开发者交流群

admin

admin

发表于 2017-07-01 13:01:56

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序初接触
相关的资讯,希望对您有帮助。

微信小程序初接触

作者: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}} >1view>
  2. <view wx:elif={{length<5}}>2view>
  3. <view wx:else>3view>

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

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可能指向向上冒泡的控件






70阅读 | 0评论
你的回应