网页搜索wx公众平台,登录后选择小程序页面下载小程序开发者工具
根据自己的电脑配置,选择稳定版本,同时开发者工具编译器有很多功能
打开小程序面板,输入自己的APPID,在WX公众平台的开发者设置里可以找到自己的APPid,同时选择JS模板,不适用云服务。
开发者工具使用
点击编译直接在开发者工具的左端预览,也有真机预览
项目模块
pages中存放了所有的小程序页面,类似WEB中的各个页面或者VUE中的各个子组件(右为VUE项目模块),例如index就是一个页面
utils存放工具性质的模块
app.js是小程序项目的入口文件 json则是全局配置文件,WXSS是全局样式文件,类似CSS文件的文件
json文件以pages里的json优先级别高,意思就是,这个子页面里有配置就在这个子页面里显示,如果没有就用APP.JSON中的配置去显示,下面两种就以index.json的navigationBarBackgroundColor去显示index页面
app.json
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
index.json
{
"usingComponents": {},
"navigationBarBackgroundColor": "#00b26a"
}
新建小程序页面
1选择pages新建文件命名list ->点开文件右键新建page命名为list最好两次命名一样
2直接在app.json中修改pages
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/list/list"
],
其中第一个index是初始页面,可以调换代码顺序来改变初始页面
wxml和html的区别
wxss和css
小程序中的JS文件
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录,启动小程序
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
view想当于容器,text为文本,{{}}里执行js逻辑,{{}}不要放文本会报错错位的值(bad values...)
<!--pages/list/list.wxml-->
<!-- view相当于DIV -->
<!-- 花括号语法内可以执行JS逻辑 -->
<view>
<view>
{{1+1}}
{{1+1==2?'yes':'no'}}
</view>
<text>文档不可换行</text>
<text>但是view可以</text>
</view>
wx:for循环,类似v-for,同理wx:if类似v-if
<view wx:for='{{list}}' wx:for-item='i' class='list' :key='{{index}}'>
{{i}}
</view>
key是下标,wx提供别 for-item 和 for-index,{{list}}是js data中的数据
JS文件
JS文件中的DATA也类似VUE写在pages中
Page({
/**
* 页面的初始数据
*/
data: {
motto:1,
type:1,
msg:'a message',
list:[1,2,3,4,5,6],
obj:{
name:'1',
id:'18'
}
},
生命周期
很有微信特色,除了页面监听启动挂载等,在整个周期后面还有各种微信触发事件,类似上拉,分享等
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
组件
常用组件icon,icon是小图标组件有size,color,type等
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}
})
progress是进程组件
text是文本组件.rich-text是富文本组件,可以读取html格式按html格式渲染,甚至可以读取特定的html样式,html中的属性需要放在attrs中,文本<p>需要放在崎中嵌套,比较烦
data: {
htmlStr:'<div><p>这是一段文字</p></div>',
htmlNodes:[{
name:'div',
attrs:{
style:'color:red',
id:'box',
class:'content-box'
},
children:[
{
name:'p',
children:[{
type:'text',
text:'这是一段文字2'
wxml
<!--pages/common/common.wxml-->
<text>pages/common/common.wxml</text>
<rich-text nodes="{{htmlStr}}"></rich-text>
<rich-text nodes="{{htmlNodes}}"></rich-text>
button组件
button作为按钮可以绑定各种事件,微信主要多了很多微信可以调用的api
直接<button open-type='string'>就可以调用各种
事件绑定
常用事件
通过触摸调用console输出打印
<button bindtap='setUserName'>按钮</button>
//wxml
data: {
motto:1,
type:1,
msg:'a message',
list:[1,2,3,4,5,6],
obj:{
name:'1',
id:'18'
}
},
//设置用户名字
setUserName(){
this.setData({
"obj.name":"2"
}),
console.log(this.data.obj.name)//this代表当前这个页面,也就是page要逐步的作用
},