小程序初体验

作者：毛茏玮 / Saint

掘金：https://juejin.im/user/5aa1f89b6fb9a028bb18966a

微博：https://weibo.com/5458277467/profile?topnav=1&wvr=6&is_all=1

项目篇：一款收集用户需求和对接物品清洗市场的小程序
名称：好行头
目的：第一阶段的前端布局，美化页面和排版，适应小程序开发工具.

知识点：

（图上举例部分）

①【1】App（）函数用来注册小程序，需要在app.js中注册，不能注册多个.

//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})

①【2】app.js内申明变量和函数只在该文件中有效，不同文件中相同变量不会相互影响。我们可以通过全局函数getApp（）获取全局.
在app.js写

//app.js
App({
globalData: {
userInfo: null,
}
})

设置数据
app.globalData.userInfo = result;

获取数据
this.setData({
userInfo: getApp().globalData.userInfo
});

②【1】Page()函数用来注册小程序中的页面：例如首页，分类，本地等页面

②【2】Page()函数有以上9中属性，Data类型为Object,其他类型为Fuction，还有其他属性可以添加函数在Object里，用This调用.

data:{
    a: 1,
message:"hhh"
},

要注意在wxml上调用JS内的Data动态数据的时候用{{}}形式，JS内的动态数据与变量间用：关联，此外字符串类型加引号.

②【3】条件渲染：通过wx：if=“{{条件}}”来判断渲染，通过JS发送数据跟条件进行判断实现前台显示与否，注意条件判断整个要放进{{}}里面，例如：“{{a+b>2}}”；条件判断也可用wx：elif和wx：else.

②【4】OnShareAppMessage的用法

* 用户点击右上角分享
onShareAppMessage: function () {}

自定义分享代码：

顾名思义onShareAppMessage有两项功能:分享小程序文字【title】；分享小程序某个页面【path】 .

②【4】列表渲染：wx：for=“{{}}”提醒一下就是在数组中index是当前数组元素下标值，item是当前数组元素值；举例:[A]3=4数组中，wx：for-index=3，wx：for-item=4.

举例：用数组构成乘法表

{{i}}*{{j}}={{i*j}}

③引用：import和include皆可以引用，import引用其他文件内的函数，直接套用之前定义好的模板；include是导入文件中的大部分代码，template/>代码内容不导入 .

//index.wxml
<template name="函数的名称"><text>{{text}}</text></template>

第一步先确定是否会多次用到某个函数；第二步在当前路径.WXML文件内template定义某个函数名称以及内容；第三步在其他的页面路径.WXML文件下引用之前定义的函数.

//test.wxml
<import src="../index/index.wxml"></import>
<template is="item" data="{{text:hello}}"></template>

（千万注意路径，小编我就是在这里摔倒的…WTF）

先就写到这里，小编还在上学，上述文章有错误之处还请各位多多指出，觉得好的朋友可以关注我的掘金和微博哦~

猜你喜欢