标签：ppm git col 调用 用户 卸载 glob 框架设计 script
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
|__project.config.json
用来对微信小程序进行全局配置
小程序配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
{
// pages 小程序所以页面路径列表
// window 全局的默认窗口表现
// tabBar 底部 tab 栏的表现
"pages": [
"pages/welcome/welcome",
"pages/posts/post",
"pages/movies/movies",
"pages/movies/movie-detail/movie-detail",
"pages/posts/post-detail/post-detail",
"pages/movies/more-movie/more-movie"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
},
"tabBar": {
"borderStyle": "white",
"position":"bottom",
"list": [
{
"pagePath": "pages/posts/post",
"text": "阅读",
"iconPath": "images/tab/yuedu.png",
"selectedIconPath": "images/tab/yuedu_hl.png"
},
{
"pagePath": "pages/movies/movies",
"text": "电影",
"iconPath": "images/tab/dianying.png",
"selectedIconPath": "images/tab/dianying_hl.png"
}
]
}
}
小程序开发者工具个性化配置
开发者工具的配置 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
<view> {{message}} </view>
<view wx:for="{{array}}"> {{item}} </view>
<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view> <view wx:elif="{{view == ‘APP‘}}"> APP </view> <view wx:else="{{view == ‘MINA‘}}"> MINA </view>
<template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template>
<view bindtap="add"> {{count}} </view>
在JS文件中声明数据和事件
Page({
data: {
message: ‘Hello MINA!‘,
array: [1, 2, 3, 4, 5],
view: ‘MINA‘,
staffA: {firstName: ‘Hulk‘, lastName: ‘Hu‘},
staffB: {firstName: ‘Shang‘, lastName: ‘You‘},
staffC: {firstName: ‘Gideon‘, lastName: ‘Lin‘}
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
一套样式语言，用于描述 WXML 的组件样式。具有 CSS 大部分特性,对 CSS 进行了扩充以及修改。
app.wxss 中的样式为全局样式，被在 page 的 wxss 文件覆盖。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
iPhone6 1rpx = 0.5px
iPhone6 作为视觉稿的标准。
@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。（.wxss）
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
<view class="normal_view" />
.class
#id
element
element, element
::after
::before
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({ tapName: function(event) { console.log(event) } })
touchstart
touchmove
touchend
tap
...
除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
以 on 开头
接受一个回调函数作为参数
wx.onCompassChange(function (res) { console.log(res.direction) })
以 Sync 结尾
执行结果可以通过函数返回值直接获取
try { wx.setStorageSync(‘key‘, ‘value‘) } catch (e) { console.error(e) }
大多数 API 都是异步 API
都接受一个 Object 类型的参数
wx.login({
success(res) {
console.log(res.code)
},
failFn,
completeFn,
Any
})
1、小程序的代码包下载到本地。
2、app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页
3、app.js 定义的 App 实例的 onLaunch 回调会被执行
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: ‘I am global data‘ })
全局的 getApp() 函数可以用来获取到小程序 App 实例。
1、logs.json 配置生成一个界面
2、装载这个页面的 WXML 结构和 WXSS 样式
3、最后装载 logs.js
Page 是一个页面构造器，注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
data Object 页面的初始数据,必须是可以转成JSON的类型
在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器
icon 图标
text 文字
navigator 页面链接
小程序常用API接口
wx.request({ url: ‘test.php‘, //仅为示例，并非真实的接口地址 method:"GET", data: { x: ‘‘ , y: ‘‘ }, header: { ‘content-type‘: ‘application/json‘ }, success: function(res) { console.log(res.data) } })
wx.setStorage({ key:"key" data:"value" })
wx.getStorage({ key: ‘key‘, success: function(res) { console.log(res.data) } })
wx.removeStorage({ key: ‘key‘, success: function(res) { console.log(res.data) } })
wx.clearStorage()
wx.showToast({ title: ‘加载中‘, icon: ‘loading‘, duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000)
wx.setNavigationBarTitle({
title: ‘当前页面‘
})
wx.navigateTo({ url: ‘test?id=1‘ })
wx.redirectTo({ url: ‘test?id=1‘ })
wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } })
wx.getSystemInfo({ success: function(res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(res.version) } })
wx.makePhoneCall({ phoneNumber: ‘1340000‘ //仅为示例，并非真实的电话号码 })
wx.getLocation({ type: ‘wgs84‘, success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
原来我们忘记了javascript 语言中 this关键字的用法了。在javascript语言中，this代表着当前的对象，它在程序中随着执行的上下文随时会变化。在本例中回调函数对象相对于showactionsheet点击事件函数对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性，也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。所以我们有了这个重要的语句：
var that=this;//把this对象复制到临时变量that.
这时候我们使用that 就不会找不到原来的对象了。
console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性
标签：ppm git col 调用 用户 卸载 glob 框架设计 script
原文地址：https://www.cnblogs.com/JOOQSS/p/9989253.html
