标签：命名 技术 动态添加 close 文件引入 存在 ddc util 指定
转载自：https://www.jianshu.com/p/f8f85757e90d
小程序的全局配置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 }``` 38 ####2，逻辑层.js 39 小程序的逻辑层是js编写，但因为小程序不是运动在浏览器中，所以js在web中的一些功能不能用，如document，windows等 。 40 app.js有全局的小程序生命周期，page.js有自己本页面的生命周期 41 42 **2.1 注册小程序App.js** 43 ```> 44 注意： 45 1,必须在app.js中注册微信小程序，全局只有一个 46 2,不能再定app（）内的函数中调用getApp（），使用this就可以拿到app的实例。 47 3,不要在onLaunch的时候getCurrentPage（），此时page还没有生成 48 4,通过其他子页面调用getApp（）获取实例后，不要私自调用小程序全局的生命周期方法 49 5,var app=getApp（）获取小程序的实例 50 App ( { 51 // 小程序生命周期的各个阶段 52 onLaunch: function(){},//当小程序初始化完成时，会触发 onLaunch（全局只触发一次） 53 onShow: function(){},//当小程序启动，或从后台进入前台显示，会触发 onShow 54 onHide: function(){},//当小程序从前台进入后台隐藏，会触发 onHide 55 onError: function(){},//当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 56 // 自定义函数或者属性，用 this可以访问 57 ... 58 })
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 // 自定义函数或者属性如： 23 customData: { hi: ‘MINA‘ } 24 ... 25 })
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)``` 6 7 8 **2.4，公共模块util.js** 9 公共模块方法需要通过module.exports对外暴露接口。 10 使用的时候需要require(path)将文件引入。如： 11 ```> 12 function sayHello(name) {//公共方法util类 13 console.log(`Hello ${name} !`) 14 } 15 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 })
视图层的数据绑定 均来自于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 6 //这是一个if if else的判断 7 <view wx:if="{{length > 5}}"> 1 </view>//如果大于5显示1 8 <view wx:elif="{{length > 2}}"> 2 </view>//否则如果大于2显示2 9 <view wx:else> 3 </view>//否则显示3 10 11 <block wx:if="{{true}}">//block只是一个包装元素，并不会在页面上做任何渲染，只受属性控制。 12 <view> view1 </view> 13 <view> view2 </view> 14 </block> 15 wx:if vs hidden 16 wx:if 是惰性的，运行时不渲染， 17 《hidden 组件始终渲染，只是简单的显示隐藏，如果需要频繁切换则用hidden》 18 19 20 21 **列表渲染** 22 view wx:for="{{array}}"> {{index}}:{{item}} </view>//默认index是当前下标的变量名，数组当前项是item，如果是object类型则是item.xxx 23 也可以另取名用wx：for-index=“xx”来指定当前数组下标的变量名 24 wx：for-item="xx" 来指定当前元素的变量名 25 //输出的结果是0:1,1:2,2:3,3:4,4:5 26 page.jsPage({ data: { array: [1, 2, 3, 4, 5] }}) 27 block wx:for 28 类似block wx:if，也可以将wx:for用在<block/>标签上 29 **wx：kay ** 30 如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态使用wx:kay 31 wx:kay 有两种形式提供 32 1，字符串 wx:kay=“unique” 33 2，保留关键字 wx:kay="*this" 34 35 36 **算法运算** 37 <view> {{a + b}} + {{c}} + d </view> 38 39 **字符串运算** 40 <view>{{"hello" + name}}</view> 41 42 43 也可以用扩展运算符 ... 来将一个对象展开 44 {{...obj1}} //a:1,b:2 可以把obj对象完全展开 45 obj1: { 46 a: 1, 47 b: 2 48 }, 49 注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面
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 5 <!-- A.wxml --> 6 <template name="A"> 7 <text> A template </text> 8 </template>
1 include可以多重引用 2 <include src="header.wxml"/>//引用header、其中header.wxml中也引用了footer.wxml 3 <view> body </view> 4 5 <!-- header.wxml --> 6 <view> header </view> 7 <include src="footer.wxml"/>
冒泡的定义：点击子组件会触发父组件，所有父组件，先子后父的触发用法类似于css，扩展尺寸单位和样式导入
1，尺寸单位rpx，1rpx=0.5px。
2，样式导入。以逗号结束。
@import "common.wxss";//引入的时候import后面跟引入文件的相对路径
可以使用内联样式，但不建议，会影响渲染速度。
page.wxss的样式会覆盖全局样式app.wxss
1，所有组件和属性都是小写，以-连接
2，image默认宽300px高度225px
3，~~~~~~和html类似（巴拉巴拉）
看开发文档
/********* 链接标签 ***********/
1 **navigator相当于a标签** 2 <navigator url="../index/index">点击跳转不关闭当前页面</navigator> 3 <navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>
标签：命名 技术 动态添加 close 文件引入 存在 ddc util 指定
原文地址：https://www.cnblogs.com/wsybky/p/9028611.html
