微信小程序开发工具及笔记--01

wechat_devtools 64位（来自官网）
链接：https://pan.baidu.com/s/1FvyOSxxZFfspJuz0bc25Vg
提取码：hwvq

小程序开发基础组件（开发文档）：
https://developers.weixin.qq.com/miniprogram/dev/component/
在这里插入图片描述

apps.json
{
	"pages":[
    	"pages/index/index",
    	"pages/firstpages/first",
    	"pages/logs/logs"
    ],
     "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

注意：不能多加逗号

1.pages包含数组，即每个页面，每个页面包含.js（配置页面入口，脚本逻辑文件）和.wxml文件（配置布局与UI，模板文件），【.json(配置文件）.wxss（样式文件）】非必须
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

属性	描述
navigationBarBackgroundColor	导航栏背景颜色
navigationBarTextStyle	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	导航栏标题文字内容
navigationStyle	导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light，默认dark
backgroundColor	窗口的背景色，默认#fff

tabBar 在这里插入图片描述
2.开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

first.js
 Page({
  		data: {
    		text :"内容001",
    		btntext :"这是按钮内容",
    		show : true,
    		news:['aaa', 'bbb'],
  		},

  		btnclink : function()
 		{
   			console.log("按钮被点击")
  			var isShow=this.data.show;
    		console.log("isShow :" + isShow)
	   	 	var newsdata = this.data.news;
    		newsdata.shift()
    		this.setData({text: "内容002", show:!isShow,news:newsdata})
  		}
})

first.wxml
	<include src="../tempdatas/tempdata" />        /*导入模板 1个*/
	<button type="default" >default</button>
	<button type="primary" bindtap="btnclink">{{btntext}}</button>

	<view wx:if="{{show}}">{{text}} 1</view>
	<view wx:else>{{text}} 2</view>
	<view wx:for="{{news}}" wx:for-item="item">
	{{index}} - {{item}}
	</view>          /*循环数组*/

	<import src="../tempdatas/footer" />		/*导入模板2个以上并选择其中一个*/
	<template is="footer1" data="{{text:'导入的内容'}}" />

index.js
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  view1clink :function(event){
    console.log("view1clink")
    console.log(event)
  },
  
  view2clink: function () {
    console.log("view2clink")
  },

  view3clink: function (event) {
    console.log("view3clink")
    console.log(event)
  },
 )}

index.wxml
<!--index.wxml-->
<view class="view1" bindtap='view1clink'>
	view1
  	<view class="view2" bindtap='view2clink'>
  		view2
   	  <view class="view3" bindtap='view3clink'>
  			view3
   	  </view>
 	</view>
</view>

在这里插入图片描述

index.wxss
.view1{
  height: 500rpx;
  width: 100%;
  background-color:bisque;
}

.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

.view3{
  height: 300rpx;
  width: 70%;
  background-color: rgb(150, 44, 44);
}

在这里插入图片描述
3.网页编程采用的是 HTML + CSS + JS ，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。 WXML 充当的就是类似 HTML 的角色。
4.通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
5.app.json 是当前小程序的全局配置，用于指定小程序由哪些页面组成，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。配置路径时不需要后缀名，因此页面名字必须一样，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

微信小程序开发工具及笔记--01

猜你喜欢