找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1396

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群

[最新文章] 微信小程序开发个人笔记

[复制链接]
查看: 1907|回复: 10
最佳答案
1 

4

主题

6

帖子

81

积分

新人求带

积分
81
 楼主| 发表于 2017-2-28 14:35:13 | 显示全部楼层 |阅读模式
1,配置文件.json

小程序的全局配置app.json和页面配置page.json
每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项。
如下:是一个包含了所有配置选项的简单配置app.json
  1. "pages": [//设置页面的路径
  2. "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  3. "pages/logs/logs"
  4. ],
  5. "window": { //设置默认窗口的表现形式
  6. "navigationBarBackgroundColor": "#ffffff",//顶部导航栏背景色
  7. "navigationBarTextStyle": "black",//顶部导航文字的颜色 black/white
  8. "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
  9. "backgroundColor": "#eeeeee", //窗口的背景色
  10. "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light
  11. "enablePullDownRefresh":"false",//是否支持下拉刷新 ,不支持的话就直接不写!
  12. "disableScroll":true,//  设置true不能上下滚动,true/false,注意!只能在page.json中有效,无法在app.json中设置该项。
  13. },
  14. "tabBar": { //底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个
  15. "list": [{//设置tab的属性,最少2个,最多5个
  16. "pagePath": "pages/index/index",//点击底部tab跳转的路径
  17. "text": "首页",//tab按钮上的文字
  18. "iconPath":"../img/a.png",//tab图片的路径
  19.   "selectedIconPath": "../img/a.png"//tab在当前页,也就是选中状态的路径
  20. },   {
  21. "pagePath": "pages/logs/logs",
  22. "text": "日志"
  23. }] ,
  24. "color":"red",//tab的字体颜色
  25.     "selectedColor":"#673ab7",//当前页tab的颜色,也就是选中页的
  26.     "backgroundColor":"#2196f3",//tab的背景色
  27.     "borderStyle":"white",//边框的颜色 black/white
  28.     "position":"bottom"//tab处于窗口的位置 top/bottom
  29. },
  30. "networkTimeout": {//默认都是60000秒一分钟
  31. "request": 10000,//请求网络超时时间10000秒
  32. "downloadFile": 10000,//链接服务器超时时间10000秒
  33. "uploadFile":"10000",//上传图片10000秒
  34. "downloadFile":"10000"//下载图片超时时间10000秒
  35. },
  36. "debug": true//项目上线后,建议关闭此项,或者不写此项
  37. }
复制代码

2,逻辑层.js

小程序的逻辑层是js编写,但因为小程序不是运动在浏览器中,所以js在web中的一些功能不能用,如document,windows等 。
app.js有全局的小程序生命周期,page.js有自己本页面的生命周期

2.1 注册小程序App.js
  1. 注意:
  2. 1,必须在app.js中注册微信小程序,全局只有一个
  3. 2,不能再定app()内的函数中调用getApp(),使用this就可以拿到app的实例。
  4. 3,不要在onLaunch的时候getCurrentPage(),此时page还没有生成
  5. 4,通过其他子页面调用getApp()获取实例后,不要私自调用小程序全局的生命周期方法
  6. 5,var app=getApp()获取小程序的实例
  7. App ( {
  8.     // 小程序生命周期的各个阶段
  9.     onLaunch: function(){},//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  10.     onShow: function(){},//当小程序启动,或从后台进入前台显示,会触发 onShow
  11.     onHide: function(){},//当小程序从前台进入后台隐藏,会触发 onHide
  12.     onError: function(){},//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  13.     // 自定义函数或者属性,用 this可以访问
  14.     ...
  15. })
复制代码

2.2 注册小程序的页面page.js
Page()用来注册一个页面,维护该页面的生命周期以及数据。
  1. Page({
  2. data: {//页面的初始数据//调用:<view>{{text}}</view> <view>{{array[0].msg}}</view>
  3. text: 'init data',
  4. array: [{msg: '1'}, {msg: '2'}]
  5. },
  6.     // 页面生命周期的各个阶段
  7.     onLoad: function(){},//生命周期函数--监听页面加载
  8.     onShow: function(){},//生命周期函数--监听页面初次渲染完成
  9.     onReady: function(){},//生命周期函数--监听页面显示
  10.     onHide: function(){},//生命周期函数--监听页面隐藏
  11.     onUnload: function(){},//生命周期函数--监听页面卸载
  12.     onPullDownRefresh: function(){},//页面相关事件处理函数--监听用户下拉动作,需要 在app.json中配置  "enablePullDownRefresh":"true" 允许上拉刷新
  13.     onReachBottom: function(){},//页面上拉触底事件的处理函数
  14.     onShareAppMessage: function(){//用户点击右上角分享
  15. return {
  16.       title: '自定义分享标题',
  17.       desc: '自定义分享描述',
  18.       path: '/page/user?id=123'
  19.     }
  20. },

  21.     // 自定义函数或者属性如:
  22.   customData: { hi: 'MINA' }
  23.     ...
  24. })
复制代码

2.3,注意事项

setData()
不能直接数据 ,this.data.text="xxxxx" //这是错误的,
this.setData ({ //在这里面修改数据的值,和react的setdata有些类似})//这是正确的
这里记住this有作用域的问题 ,如在局部函数中使用需.bind(this),或其他

getApp()
如果需要全局的数据可以在app.js中设置。如:
  1. App({// app.js
  2.   globalData: 1
  3. })
  4. // 某page.js
  5. console.log(getApp().globalData)
复制代码

2.4,公共模块util.js
公共模块方法需要通过module.exports对外暴露接口。
使用的时候需要require(path)将文件引入。如:
  1. function sayHello(name) {//公共方法util类
  2.   console.log(`Hello ${name} !`)
  3. }
  4. module.exports.sayHello = sayHello//用module.exports 对外暴露接口
复制代码
  1. //先引入文件,是新建的一个utils包,公共方法在util.js里面
  2. var util = require('../../utils/util.js')
  3. Page({//调用类
  4.   onLoad: function () {//  使用时,用util引用名调用,如:util.sayHello()
  5. util.sayHello('我是传的值');
  6.   }
  7. })
复制代码

3,视图层WXML

视图层的数据绑定 均来自于Page中的data,修改值则是this.setData
数据绑定使用{{变量}}双大括号将变量包起来
  1. **条件渲染**
  2. <view wx:if="{{zhenjiaa=='123'}}">123334</view>
  3. <view wx:if="{{zhanjia}}">123334</view>
  4. <view wx:if="{{len > 5}}">大于5我就显示了 </view>

  5. //这是一个if if else的判断
  6. <view wx:if="{{length > 5}}"> 1 </view>//如果大于5显示1
  7. <view wx:elif="{{length > 2}}"> 2 </view>//否则如果大于2显示2
  8. <view wx:else> 3 </view>//否则显示3

  9. <block wx:if="{{true}}">//block只是一个包装元素,并不会在页面上做任何渲染,只受属性控制。
  10.   <view> view1 </view>
  11.   <view> view2 </view>
  12. </block>
  13. wx:if vs hidden
  14. wx:if 是惰性的,运行时不渲染,
  15. 《hidden 组件始终渲染,只是简单的显示隐藏,如果需要频繁切换则用hidden》



  16. **列表渲染**
  17. view wx:for="{{array}}"> {{index}}:{{item}} </view>//默认index是当前下标的变量名,数组当前项是item,如果是object类型则是item.xxx
  18. 也可以另取名用wx:for-index=“xx”来指定当前数组下标的变量名
  19.             wx:for-item="xx" 来指定当前元素的变量名
  20. //输出的结果是0:1,1:2,2:3,3:4,4:5
  21.   page.jsPage({ data: { array: [1, 2, 3, 4, 5] }})
  22.   block wx:for
  23. 类似block wx:if,也可以将wx:for用在<block/>标签上
  24. **wx:kay **
  25. 如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态使用wx:kay
  26. wx:kay 有两种形式提供
  27. 1,字符串  wx:kay=“unique”
  28. 2,保留关键字 wx:kay="*this"


  29. **算法运算**
  30. <view> {{a + b}} + {{c}} + d </view>

  31. **字符串运算**
  32. <view>{{"hello" + name}}</view>


  33. 也可以用扩展运算符 ... 来将一个对象展开
  34. {{...obj1}} //a:1,b:2   可以把obj对象完全展开
  35. obj1: {
  36.       a: 1,
  37.       b: 2
  38.     },
  39. 注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面
复制代码

3.1,wxml模版的使用
name定义组件模版的名称,引用模版的时候使用is属性指定模版的名字,is可以进行简单的三木运算。需要传入模版需要的data数据。因为模版拥有自己的作用域,所以只能使用data传入数据,而不能直接{{}}使用。
  1. <template name="msgItem">// 某个模板
  2.   <view>
  3.     <text> {{index}}: {{msg}} </text>
  4.     <text> Time: {{time}} </text>
  5.   </view>
  6. </template>
  7. ----------------------------------
  8. 使用时:
  9. <template is="msgItem" data="{{...item}}"/>//data里面需要传入name为msgItem 模板中所需要的值
复制代码

3.2,WXML公共模块的引用
WXML提供两种文件引用方式1,import 。 2,include

如下:

  1. import有作用域的概念,不可以A import C,可以A import B,
  2. <!-- B.wxml -->
  3. <import src="a.wxml"/>//使用import标签

  4. <!-- A.wxml -->
  5. <template name="A">
  6.   <text> A template </text>
  7. </template>
复制代码
  1. include可以多重引用
  2. <include src="header.wxml"/>//引用header、其中header.wxml中也引用了footer.wxml
  3. <view> body </view>

  4. <!-- header.wxml -->
  5. <view> header </view>
  6. <include src="footer.wxml"/>
复制代码

3.2,事件
1, bind开头不阻止冒泡,用catch开头可以阻止冒泡。如catchtap~冒泡的定义:点击子组件会触发父组件,所有父组件,先子后父的触发
2,无特殊情况自带事件的各个事件对象以及对象属性列表
3,dataset,在wxml组件中可以定义data数据,会通过事件传递。以data-开头,多个单词以为-链接,如data-a-b,但是不能有大写,它会自动转成驼峰命名,调取的时候去驼峰命名的名字。

4, wxss

用法类似于css,扩展尺寸单位和样式导入
1,尺寸单位rpx,1rpx=0.5px。
2,样式导入。以逗号结束。
@import "common.wxss";//引入的时候import后面跟引入文件的相对路径
可以使用内联样式,但不建议,会影响渲染速度。
page.wxss的样式会覆盖全局样式app.wxss

5,组件

1,所有组件和属性都是小写,以-连接
2,image默认宽300px高度225px
3,~~和html类似(巴拉巴拉)

6,API

官网超详细。。。。 (以后再分享demo~~)

-------------------以下是开发中的整理-------------------------------

  1. **navigator相当于a标签**
  2. <navigator url="../index/index">点击跳转不关闭当前页面</navigator>
  3. <navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>
复制代码

未完待续----

原文:htt p://www.jianshu.com/p/f8f85757e90d
回复

使用道具 举报

最佳答案
0 

0

主题

4

帖子

44

积分

新人求带

积分
44
发表于 2017-3-2 10:41:01 | 显示全部楼层
收藏额 谢谢
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

22

帖子

346

积分

略知一二

积分
346
发表于 2017-3-2 15:57:11 | 显示全部楼层
收藏,谢谢分享。。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

12

帖子

191

积分

新人求带

积分
191
发表于 2017-3-6 10:12:58 | 显示全部楼层
dadasdasdasdasdad
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

4

帖子

74

积分

新人求带

积分
74
发表于 2017-3-6 21:54:10 | 显示全部楼层
谢谢,收藏学习
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

738

积分

专家路上

积分
738

积极分子

QQ
发表于 2017-3-15 10:03:19 | 显示全部楼层
66666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

738

积分

专家路上

积分
738

积极分子

QQ
发表于 2017-3-15 10:03:25 | 显示全部楼层
6666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

738

积分

专家路上

积分
738

积极分子

QQ
发表于 2017-3-15 10:03:32 | 显示全部楼层
66666666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

738

积分

专家路上

积分
738

积极分子

QQ
发表于 2017-3-15 10:03:40 | 显示全部楼层
666666666666666666666666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

14

帖子

97

积分

新人求带

积分
97
发表于 2017-5-30 09:03:19 | 显示全部楼层
收藏下,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com