微信小程序简介

注册小程序

邮箱必须是没有申请过公众号，服务号的邮箱

小程序中的概念

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;
  width: 400rpx;
  height: 400rpx;
  background-color: blue;
}

小程序的官方组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html