一、sitemap.json
站点地图 微信搜一搜里面哪些页面能够展现,哪些不能
二、project.config.json
项目配置
三、app.js
全局的业务逻辑
四、app.json
全局的小程序配置
五、app.wxss
全局的样式
六、pages
存放页面的文件夹
七、utils
存放工具的文件夹css
pages页面配置
那个页面写在前面,那个页面默认打开
window窗口配置
一、backgroundTextStyle–背景文字颜色
二、navigationBarBackgroundColor–导航栏颜色
三、navigationBarTitleText–导航栏标题
四、navigationBarTextStyle–导航栏文字颜色
注意:.json文件不能注释,最后一个选项不能有逗号web
<view></view> <text></text>
{{msg}}
<view wx:if="{{flag}}">显示</view> <view wx:elif="{{num>5}}">显示5</view> <view wx:elif="{{num>2}}">显示2</view>
<view wx:for="{{list}}" wx:key="index"> {{index+1}}---{{item}} </view> <view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex" > {{myitem}} </view>
<template name="student"> <view> <view>名称:{{name}}</view> <view>年龄:{{age}}</view> </view> </template>
<import src="./stu.wxml" /> <template is="student" data="{{...stu[0]}}"></template>
<include src="./prc.wxml" />
text
view
input
imageajax
一、wx.showToast({title:"",icon:‘none’})
二、wx.getStorageSync(k)获取本地存储
三、wx.setStorageSync(k,v)设置本地存储
四、wx.request({
url:“xxx”,
method:“GET||POST”,
success(res){}
}) 网络请求
五、wx.setNavigationBarTitle({title:“xxx”}) 设置标题数据库
一、bindtap --轻点
二、bindinput --表单的值发生改变
三、监听事件(.wxml):
四、事件响应函
数(.js)
五、事件的参数
1.表单 --js中经过e.detail.value
2.其余组件npm
<view bindTap="showMsg" data-msg="i love" ></view>
3.在js中获取json
showMsg(e){ //e.target.dataset.msg 获取参数 }
4.事件函数
onReachBottom 触底
onPullDownRefresh 下拉刷新小程序
.json文件 "enablePullDownRefresh": true, 容许下拉刷新 "backgroundTextStyle":"dark" 下拉文字样式 light dark
<navigator />
url
open-type
一、navigate 默认跳转
二、navigator 切换小程序api
<navigator target="miniProgram" open-type="navigate" app-id="xxxx"> 打开绑定的小程序</navigator>
三、switchTab切换底部栏
四、redirect 重定向
五、relunch 重启
六、navigateBack 返回
七、exit退出
tabBar的配置
一、color 文字颜色
二、selectedColor 选中文字颜色
三、list 列表数组
"pagePath":"页面地址", "text":"首页", "iconPath":"图片地址", "selectedIconPath":"选中图片地址"
js切换
一、wx.navigateTo({url:“xxxx”}) 跳转
二、wx.navigateBack() 返回
三、wx.redirectTo({url:“xxxx”}) 重定向
四、wx.switchTab({url:“xxxx”}) 切换底部栏
页面传参
一、经过url传参服务器
pages/xxx/xxx?name=xxx&age=18
二、取参数
onload(options){ console.log(options.name,options.age) }
一、onLaunch --程序启动
二、onShow --程序切换到前台
三、onHide --程序切换到后台
四、onError --程序发生错误
一、onLoad --页面加载
二、onReady --渲染完毕
三、onShow --显示
四、onHide --隐藏
五、onUnload --卸载 redirect|navigateBack触发
app.json配置分包与分包预加载,一般底部栏对应页面做为主包对应的二级页面做为分包,包的大小2M最大16M,子包相互间不能引用,子包能够引用主包app的内容
一、npm初始化
二、安装的时候–S --production
三、详情容许npm插件
四、工具构建npm
使用ES6新增的属性能够动态的建立[“list[0]”]
一、定义组件 --组件文件夹(cell)—cell.wxml|cell.wxss|cell.js|cell.json
二、在页面的json中注册组件
"using":{ "cell":"/components/cell/cell" }
三、在页面的wxml中使用
一、目的 --组件能够嵌套
二、传入插槽内容
<cell><view>定义插槽内容</view></cell>
三、在组件接收
<view> <slot></slot> </view>
一、定义
<view slot="head"></view> <view slot="foot"></view>
二、使用插槽
<slot name="head"> <slot name="foot">
三、在组件的options选项中配置
options:{ //多个slot multipleSlots:true, },
options选项中配置
stylesolation
options:{ //多个slot multipleSlots:true, styleIsolation:"isolated", // 样式隔离方式 --isolated隔离,--apply-shared页面样式分享到组件,--shared双向共享 },
一、组件中配置
externalClasses:[“cell-class”],//01定义外部类 能够组件外部定义,class在组件内容使用,传递过来的class
二、组件中使用
<view class="cell-class"></view>
三、页面中传入
<cell cell-class="mycell">
四、在页面css中编写mycell
.mycell{color:#f70}
一、页面参数传递
<cell url="/xx/xx/xx"><cell>
二、组件中定义
properties:{ url:{type:String,value:''} }
三、使用参数
this.data.url
一、Pages({})
二、Components({})
一、show显示
二、hide隐藏
三、resize改变大小
一、created建立
二、attached插入到页
三、ready渲染完毕
四、move移动
五、detached移除
六、error错误
var myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], )},
observers: { 'numberA, numberB': function(numberA, numberB) { // 在 numberA 或者 numberB 被设置时,执行这个函数 this.setData({ sum: numberA + numberB }) } }
一、纯数据字段是一些不用于界面渲染的data字段,能够用于提高页面更新性能
二、使用
options: { pureDataPattern: /^_/ // 指定全部 _ 开头的数据字段为纯数据字段 }, data: { a: true, // 普通数据字段 _b: true, // 纯数据字段 },
stylesolation:"isolated"
小程序
<button open-type="getUserInfo" bindgetUserInfo="bindGetUserInfo" ></button>
bindGetUserInfo须要用户弹框受权,拿到用户的:头像、用户名
wx.login({})拿到一个code信息、经过ajax把用户信息、和code发送给服务器
appid+Appscecret+code发送给微信服务器
微信服务器响应后获得open-id、session_key
一、open-id—用户的惟一识别id
二、有了open-id 加上用户名+昵称 存入到本身服务器的数据库中
将open-id、session_key发送给服务器
一、在wx.login()函数中 获取code
二、open-type=“getUserInfo” 获取到用户的头型和昵称等信息
四、把获取到的code经过ajax发送给服务器
五、服务器经过appid+scecret+code换取 openid和session_key
六、能够把openid+昵称存储到服务器
七、存储到服务器成功后能够自定义用户的信息 登陆状态