Foreword
Due to project needs, we recently started learning WeChat applet development, starting with official development tools. WeChat Mini Programs are good choices in terms of development difficulty and convenience, and do not have to consider too many things for students. This series is intended to write study notes, which can be referenced in the future, and it is also a kind of memory. If you can give a little help to those who read it, it is really an honor.
ready
tool
The installation and establishment of the project are very simple. For APPID, temporarily select the test number or leave it blank (if you need to go online, you need to use the real ID), and select JavaScript as the language. There is a default code in the newly created project. Just start learning and can't understand those codes, just delete them. At a glance, we can see that the developer tools are mainly divided into five parts , an emulator (emulation of mobile devices), an editor (write code), a debugger, a directory tree, and a toolbar. The first four can be found in the tool Set in the column and disappear.
Simulator
There is a choice of phone model and status bar in the emulator, the most important is the phone model. Generally choose iphon6 as the benchmark, because the small program we develop is to be applied to a variety of mobile devices, and the screen resolution of the device is different, so if you use px to write a dead style, then change the style of a device will be bad Off. The WeChat applet uses rpx to solve this problem, that is, on a screen with a width of 375 physical pixels, 1rpx = 375/375 = 1px. For iPhone6, the screen width is 750 physical pixels, which is still 375px, so it is concluded that 1rpx = 375/750 px = 0.5px.
Directory tree (Drectory Tree)
There is a mapping relationship between the directory tree and the physical address, and access in the applet only uses relative addresses. We can see that the default project directory tree mainly contains three parts, pages directory, utils directory and some global files. Each page is generally stored in pages, the default project contains two pages, the home page index and a log page, each page is composed of the corresponding layout style file. utils mainly puts some tool-type functions, such as network requests, implemented in util.js, then exported, and finally imported into the required page to use some of the components. We may still use Components in the future, we can then create a directory called Component to store components.
Editor
If you don't like the background color or font size, you can modify it in Settings- > Appearance Settings.
structure
The code consists of .js files (the main development language of applets is JavaScript, developers use JavaScript to develop business logic and call the APIs of applets to complete business requirements), .json files (JavaScript Object Notation, is a data format, and Not a programming language, in the small program, JSON plays the role of static configuration), .wxml file (WeiXin Markup language, is a set of tag language designed by the small program framework, combined with the basic components of the small program, event system, can be built The structure of the page), .wxss file (WeiXin Style Sheet, is a set of style language used for small programs, used to describe the WXML component style, that is, visual effect. WXSS is similar to CSS in Web development. In order to be more suitable Small program development, WXSS made some additions and modifications to CSS) composition.
Global configuration file
- Project.config.json: used to configure the development environment.
{
"description": "Project configuration file",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.6.6", //库版本
"appid": "wx866f52f21b24eed3", //appID
"projectname": "miniprogram-test-2",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}- app.wxss: overall style file, the container class can be used by every page of the project (public style).
/**app.wxss**/
.container {
height: 100%; //高度是整个容器高度
display: flex; //布局方式：flex
flex-direction: column; //主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
align-items: center; //非主轴方向居中对齐
justify-content: space-between; //项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
padding: 200rpx 0; //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
box-sizing: border-box; //用属性box-sizing来调整框模型
background-color: red; //背景颜色
} - app.json: The file in the root directory of the
app.jsonapplet is used for global configuration (static) of the WeChat applet . The file content is a JSON object, and pages and window are two of many attributes. The former is used to specify which pages the applet is composed of, and each item corresponds to the path (including file name) information of a page, and the latter is used to set the status bar, navigation bar, title, and window background color of the applet. ( Note: The actual writing code can not put comments )
{
"pages":[ // 页面路径列表
"pages/index/index",
"pages/logs/logs"
],
"window":{ //全局的默认窗口表现
"backgroundTextStyle":"light", //下拉loading的样式，仅支持 dark/light
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
}
}- app.js: The logical processing of the entire project. Including the use of some life cycle functions, such as onLoad, onshow and onReady.
Page configuration file
- .json: Each applet page can also use
.jsonfiles to configure the window performance of this page. The configuration items on the page will coverapp.jsonthewindowsame configuration items in the current page . - .wxml: used to construct the corresponding page structure
<!--index.wxml--> <!--view:视图容器 类-->
<view class="container"> <!--container：全局的一个容器，样式在app.wxss中-->
<view class="userinfo"> <!--userinfo：存放用户信息的容器，在index.wxss中设置样式-->
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <!--button：表单组件：按钮-->
<block wx:else> <!-- <block/> 标签可将多个组件包装起来-->
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!-- image 媒体组件：图片-->
<text class="userinfo-nickname">{{userInfo.nickName}}</text> <!-- image 文本组件；userinfo-nickname：昵称容器，在index.wxss中设置样式-->
</block>
</view>
<view class="usermotto"> <!-- image 签名容器，在index.wxss中设置样式-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
- .wxss: According to the container class, adjust the page style to improve the visual effect.
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%; //圆形为50%，小于50%为圆角
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px; //外边框顶部与其他容器外边框间隔200px
}
hello world！
The simplest hello world can be achieved with only one line of code. We first delete the contents of other files except Project.config.json, including the logs directory, and then in app.json, index.js, index.wxml Fill in the following code, you can achieve hello word.
{"pages":[ "pages/index/index"]}
Page({})<text>hello world!</text>Let's increase the difficulty little by little and complete an advanced version of hello world. First introduce the variable, add the hello variable in the data attribute of the Page class, and assign a value. Then use {{}} to use it.
Page({
/**
* 页面的初始数据
*/
data: {
hello:"hello world!"
}
}<view>{{hello}}</view>We can modify the style of the hello word, such as changing the background color, modifying the font, and so on. First, give the container a name: hello, and then set the style.
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
</view>.hello_group{
background: #0c960c; //将鼠标放在#0c960c，会弹出色谱，可以根据这个选择自己喜欢的颜色
width: 750rpx;
height: 750rpx;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}The view container of the WeChat applet supports two layout methods: Block and Flex. Here we introduce Flex layout to toss our hello world. Here we set the text to be centered horizontally and vertically, and choose the horizontal direction from left to right as the main axis.
.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}We put hello world in two containers called hello and word, and then use Flex layout.
Page({
data: {
hello:"你好",
world:"世界"
}
）<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}We can then use the image component to give the applet a picture of the world, https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= 1879049657,3980794066 & fm = 11 & gp = 0.jpg. Then it was found that the layout was messed up. Let's modify it. Although it is still ugly, it seems to be much better than before.
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap; //换行
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50% //圆形
}We can continue to do things, so many blanks below make the patients with obsessive-compulsive disorder very uncomfortable, add something, and then add a sliding window. Let ’s add some text, for example, a brief introduction to our planet. First copy a bit of text from Baidu Encyclopedia: "Earth is one of the eight planets of the solar system. It is ranked third in the order from near to far from the sun. It is also the most terrestrial planet in the solar system in diameter, mass and density. It is 150 million kilometers away from the sun. The earth rotates from west to east while revolving around the sun. It is currently 4 to 4.6 billion years old. [1] It has a natural satellite-the moon, and the two form a celestial system-the earth-moon system. It originated in the primitive solar nebula 4.6 billion years ago. The Earth ’s equatorial radius is 6378.137 km, polar radius is 6536.752 km, and the average radius is about 6371 km. The equatorial circumference is about 40076 km, which is irregular with a slightly flat equatorial and slightly bulging poles. Elliptical sphere. The surface area of the earth is 510 million square kilometers, of which 71% is ocean and 29% is land. The earth looks blue in space. There are core, mantle and shell structure inside the earth, and hydrosphere, atmosphere and magnetic field outside the earth The Earth is currently the only celestial body known to have life in the universe, and is home to millions of living things, including humans. " Then add it. Set the status bar again.
.hello_group{
background: #0c960c;
width: 750rpx;
height: 700rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50%
}
.brif_group{
margin-top: 20rpx;
margin-bottom: 80rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
.brif_title{
color: #13b3e4;
margin-bottom: 20rpx;
font-size: 50rpx;
}
.brif_content{
font-size: 25rpx;
}
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>
<view class = "brif_group">
<view class = "brif_title">地球（Earth）</view>
<text class = "brif_content">太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长大约为40076千米，呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里，其中71%为海洋，29%为陆地，在太空上看地球呈蓝色。地球内部有核、幔、壳结构，地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体，是包括人类在内上百万种生物的家园。
</text>
</view>app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle": "black"
}
}
There are still a lot of unwritten, continue to the next article, too much looks tired, just started to learn, I feel the basic operation is to write a lot of containers, and then fill in the container, and then set the style.
reference
