注册小程序
邮箱必须是没有申请过公众号,服务号的邮箱
小程序中的概念
AppId: 小程序在微信官方服务器的唯一表示,相当于主键id,每个小程序的appid都不同
AppSecret:小程序密钥,他是在调用微信接口时,需要传递的参数
服务器域名:就是django程序的域名,域名的要求,必须是公网可以访问的https的域名
小程序项目目录
pages 所有的页面
-index 每一个文件夹代表着一个页面,每个页面都是由四个文件组成
-index.js 页面的js文件
-index.json 页面的配置文件
-index.wxml 页面的html文件
-index.wxss 页面的css文件
utils 写公共方法的,可以不用
app.js 小程序项目的js,全局只有一个,全局的js文件,小程序的入口处
app.json 小程序的全局配置文件
app.wxss 小程序的全局css文件
project.config.json 项目配置文件,不动
sitemap.json 这个是小程序的seo文件
小程序的全局配置app.json
注意:配置文件中不支持注释
{
pages添加页面路由的,添加一个路由,就是添加一个页面,谁的路径在第一个谁就是首页
"pages": [
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
windows主要是配置下拉和头部,以navigation开头都是头部,如果要有下拉,必须enablePullDownRefresh把这个配置设置成true
"window": {
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#333",
"navigationBarTitleText": "Python",
"navigationBarTextStyle": "white"
},
tabBar主要是配置页面下部的导航,显示顺序是和list里面的顺序一致,list里面至少要有两页,最多有五项
"tabBar": {
"color": "#ffffff",
"selectedColor": "#FFB6C1",
"backgroundColor": "#333",
"borderStyle": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "index页面",
"iconPath": "images/icon-2.png",
"selectedIconPath": "images/icon-2-sed.png"
},
{
"pagePath": "pages/test/test",
"text": "test页面",
"iconPath": "images/icon1.png",
"selectedIconPath": "images/icon1-sed.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
小程序的页面配置
页面.json
可以对app.json中的window进行覆盖,如果页面没有配置就走全局,页面配置了,就走页面,写法如下
{
"usingComponents": {},
"navigationBarTitleText": "Python13"
}
小程序的数据绑定
页面的js
Page({
/**
* 页面的初始数据
*/
data: {
msg:'I am a handsome boy!',
num: 12,
name:"tank",
num1:2,
flag:false,
name_list:[{"name":"godlover","hobby":"eat"},{"name":"godsee","hobby":"drink"}],
color:"pink"
},
页面的.wxml文件和html文件性质一样
页面引用js的数据是用{{}},也可以用作属性值
<view id="item-{{msg}}">ttt {{msg}}</view>
<view> my age is {{num}}</view>
如果都是字符串,{{name + msg}},就是拼接
<view>{{name+msg}}</view>
如果一个是字符串一个是数字也是拼接
<view>{{name+num}}</view>
如果都是数字,则是做运算
<view>{{num-num1}}</view>
数字做字符串分开来写
<view>{{num}}+{{num1}}</view>
在页面中如果属性想表达布尔值,一定要加{{}},当然也可以直接使用变量{{布尔值变量}}
<checkbox checked="{{true}}"></checkbox>
<checkbox checked="{{flag}}"></checkbox>
条件判断语句
<view wx:if = "{{num>11}}">I am a big man!</view>
循环默认是用index -> 取键,item -> 取值,
用wx:for-index --> 来修改取键的index
用wx:for-item --> 来修改取值的item
一般都要加上wx:key ="index"来提高遍历的速度
<view wx:for = "{{name_list}}" wx:key="index">
{{index}}:{{item.name}} ==> {{item.hobby}}
</view>
<view wx:for = "{{name_list}}" wx:for-index="k" wx:for-item="v" wx:key="index1">
{{k}}:{{v.name}} >>> {{v.hobby}}
</view>
如果只想输出内容没不想要包裹的标签,用<block>标签做承载标签
<block wx:for = "{{name_list}}" wx:key="index">
{{index}}:{{item.name}} ==> {{item.hobby}}
</block>
小程序的wxss文件
标签中和原生的html一样都有class和id,我们的样式写在wxss文件,和普通的css没有区别,只是用rpx来代替px,
一般1prx等于0.5px
wxml文件
<view class="cls"></view>
行内样式写法与原生的没有区别,可以调用变量来做属性
<view style="color:red">bbb</view>
<view style="color:{{color}}">aaa</view>
wxss文件
.cls{
margin-top: 20px;
400rpx;
height: 400rpx;
background-color: blue;
}
小程序的官方组件
https://developers.weixin.qq.com/miniprogram/dev/component/view.html