微信小程序_1、语法入门

微信公众平台号创建+appid获取

参考https://developers.weixin.qq.com/miniprogram/dev/

项目构成文件理解

项目结构如下：

1. .json 后缀的 JSON 配置文件 ------》配置数据
2. .wxml 后缀的 WXML 模板文件 ------》类似html,展示
3. .wxss 后缀的 WXSS 样式文件 ------》类似css,样式
4. .js 后缀的 JS 脚本逻辑文件 ------》js逻辑

配置:json

配置文件可以看到有两个：
1、project.config.json；
2、app.json,index.json；

根目录下：project.config.json 为全局配置

{
	//描述信息
	"description": "项目配置文件",
	//打包配置选项：忽略对应文件，这里为空
	"packOptions": {
		"ignore": []
	},
	//项目设置项
	"setting": {
		//检查案例域名和TLS
		"urlCheck": true,
		"es6": true,
		//样式自动补全
		"postcss": true,
		//自动压缩
		"minified": true,
		"newFeature": true,
		"autoAudits": false
	},
	//编译类型：小程序
	"compileType": "miniprogram",
	"libVersion": "2.4.2",
	"appid": "未知",
	"projectname": "HellowWorld",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

app.json进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
这里copy官方代码：

{
  //用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  "pages": ["pages/index/index", "pages/logs/index"],
  //定义小程序所有页面的顶部背景颜色，文字颜色定义等。
  "window": {
  	//最上边导航栏标题
    "navigationBarTitleText": "Demo"
  },
  //底tab栏的表现
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  //网络超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  //是否开启调试模式
  "debug": true,
  //导向另一个小程序id
  "navigateToMiniProgramAppIdList": ["xxxx未知xxxx"]
}

wxml模板

copy官方文档代码学习：

//view 相当于html中的div,class还是熟悉的味道
<view class="container">
  <view class="userinfo">
  	//{{xxx}}中类似js逻辑
    <button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

js逻辑

App()函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
只调用一次

App({
  onLaunch() {
    // 小程序启动之后 触发
  }
})

详细api官方文档很详细，这里只用于记录下学习过程。