英文外贸网站模板百度关键词刷搜索量

微信小程序

一、微信小程序的简介：

小程序的介绍：

1. 微信小程序：是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，可以理解为使用微信平台开发的app。
2. 小程序是混合开发模式的一种具体实现。
3. 通过wxml（类似与H5）与wxss（类似于css）构建页面的渲染。
4. 通过逻辑控制层（类似于vue中的view-model）控制数据逻辑。
5. 底层通过封装实现了硬件设备调用（例如wifi、蓝牙等）。
6. 提供了微信登录、离线缓存等通用接口。

小程序与普通网页开发的区别：

​ 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

小程序的运行环境(图1)：

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序账号、安装小程序开发者工具、配置项目等等过程方可完成。

二、微信小程序的发布流程：

注册申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。

再输入完邮箱和密码后会跳转到邮箱激活确认的页面：

点击登录邮箱进入登录界面会弹出邮箱给的地址：

点击发送的链接进入界面：

最后一步就是信息登记，根据工作的需求来选择主题类型。

在这块输入自己的身份信息然后进行短信验证。

点击完继续后，会跳转到开发管理的这个页面，然后在点击开发设置，就会看到自己的开发者ID。属于自己的一个AppID

一般在写项目的时候会首先选择测试号，在等项目上线的时候我们再去填写一个注册时候的AppID，这样就可以按需上线。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序账号之后，我们需要一个工具来开发小程序。

安装开发工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装

这里的话就是根据自己的一个需求去下载一个微信开发者工具来编写属于自己的小程序，这里的话我自己下载的稳点版，相对于其他两个来说把他们两个中存在的缺陷在这个稳定版中也全都得到了改善。

三、创建第一个小程序：

新建项目

1. 打开开发者工具，然后选择“小程序项目”，点击右下角的“+”新建项目。
2. 选择一个空的文件夹作为项目目录，填入刚刚的 AppID，再填写一个项目名称，比如我这里叫做GoZeroWaster。点击“确定”进入工具主界面。

项目目录结构

. ├── app.js # 小程序的逻辑文件 ├── app.json # 小程序的配置文件 ├── app.wxss # 全局公共样式文件 ├── pages # 存放小程序的各个页面 │ ├── index # index页面 │ │ ├── index.js # 页面逻辑 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式表 │ └── logs # logs页面 │ ├── logs.js # 页面逻辑 │ ├── logs.json # 页面配置 │ ├── logs.wxml # 页面结构 │ └── logs.wxss # 页面样式表 ├── project.config.json └── utils └── util.js

根目录下有三个文件分别是：app.js、app.json、app.wxss，小程序必须有这三个描述APP的文件，并且必须放在根目录下。这三个是应用程序级别的文件，和他平行的还有一个pages文件夹，用来存放小程序的各个页面。

可以和web前端开发技术做个类比：

1. wxml相当于HTML文件，用来编写页面的标签和整体的结构，但是里面只能用小程序自己封装的组件；
2. wxss相当于CSS文件，用来写页面的样式，只是把CSS文件换成了wxss文件；
3. js文件相当于前端编程中的 JavaScript 文件，用来写小程序的页面逻辑；
4. json文件用来配置页面的样式和行为；

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

下面是一个微信开发者工具界面图，我们先来认识一下主题的页面：(图2)：

页面介绍：

项目组成

给小程序新增一个页面

测试号申请（我们小程序账号申请完成之后，建议务必要申请一个测试号用来开发）,在点击测试号的时候会自动生成一个AppID，这个ID自己无法更改。测试号和我们刚刚上面注册的正式号不一样 测试号登录成功后只显示你的一些信息

这个就是创建完之后出现这个页面。

1. 进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建

注！想要哪一个页面先展示可按顺序排即可，第一个页面路径就是第一个显示的页面

给小程序当前页面设置局部配置

1. 当局部样式和全局样式冲突，根据就近原则，局部样式会覆盖全局样式

   

   2. 当局部样式的权重大于等于全局样式的权重时，才会覆盖全局的样式

      

      页面配置和全局配置的关系

      小程序中app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
      如果某些小程序页面想要拥有特殊的窗口表现，此时，”页面级别的.json配置问价“就可以实现这种需求。
      注意：当页面配置和全局配置冲突时，根据就近原则，最终的效果是以页面配置为准

      页面配置中常用的配置项

      和全局配置一样

{"usingComponents": {},"navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white","navigationBarTitleText": "第一个小程序项目","backgroundColor": "#eeeeee","backgroundTextStyle": "light"
}

四、微信开发者工具组件：

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

Vant Weapp的引入：

1. 初始化 ，进入项目，输入cmd,j进入后输入npm init -y

   

   2. 安装通过 npm 安装

   npm i @vant/weapp -S --production
   

   

   3. 删除style：v2

    删除style:v2
   

   

   4. 修改project.config.js，packNpmManually改为 TRUE 添加对象

   

   5. 点击工具，构建npm ,构建成功会出现

   

   6. 入组件，使用组件

   

   tab底部栏

   1. 引入,在app.json或index.json中引入组件

   "usingComponents": {"van-tab": "@vant/weapp/tab/index","van-tabs": "@vant/weapp/tabs/index"
   }
   

   2. 使用插件.通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签

   <van-tabs active="a"><van-tab title="标签 1" name="a">内容 1</van-tab><van-tab title="标签 2" name="b">内容 2</van-tab><van-tab title="标签 3" name="c">内容 3</van-tab>
   </van-tabs>
   

官方把小程序的组件分为了9大类：

 1.视图容器    2.基础内容    3.表单组件        4.导航组件    5.媒体组件    6.地图组件        7.画布组件    8.开放能力    9.无障碍访问

现只举例部分常用组件，大部分可以看官方文档组件部分，不再做过多赘述。

自适应单位rpx

大家应该注意到了，在hello.wxss样式表里，绝大多数长度单位都设置的是rpx这个全新的单位。比如设置图片大小的时候。

要透彻的了解rpx这个单位，还需要对移动端的分辨率有一定的了解，比如物理分辨率px和逻辑分辨率pt等概念。简单的说，rpx将随着屏幕尺寸的变换而变换，但px不会。这里我们只需要记住如下的结论：

在iPhone6的宽度750个物理像素作为标准来做设计图，1物理像素=1rpx=0.5px，

比如在iPhone6宽度750物理像素下，要显示一张宽和高都是200像素*200像素的图片，就要把图片的高度和宽度都设置为200rpx，或者100px ，这时候在iphone6上的显示的效果都是一样的，但是我们换到其他机型的时候，就会出现差异。因为rpx将随着屏幕尺寸的变换而变换，但px不会改变大小。

视图容器

1. view 组件

在小程序中,通常使用<view/>代替<div/>作为容器来做布局

<!--pages/welcome/welcome.wxml-->
<view class="container"><image class="avatar" src="/images/测试.jpg"></image><text>Hello</text><!-- <button>微信小程序</button> --><view><text>微信小程序</text></view>
</view>

2. scroll-view组件

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

1. 横向滚动需打开 enable-flex 以兼容 WebView，如
2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

通用属性：

示例代码：

<view class="container"><view class="page-body"><view class="page-section"><view class="page-section-title"><text>Vertical Scroll\n纵向滚动</text></view><view class="page-section-spacing"><scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><view id="demo1" class="scroll-view-item demo-text-1"></view><view id="demo2"  class="scroll-view-item demo-text-2"></view><view id="demo3" class="scroll-view-item demo-text-3"></view></scroll-view></view></view><view class="page-section"><view class="page-section-title"><text>Horizontal Scroll\n横向滚动</text></view><view class="page-section-spacing"><scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"><view id="demo1" class="scroll-view-item_H demo-text-1"></view><view id="demo2"  class="scroll-view-item_H demo-text-2"></view><view id="demo3" class="scroll-view-item_H demo-text-3"></view></scroll-view></view></view></view>
</view>

.page-section-spacing{margin-top: 60rpx;
}
.scroll-view_H{white-space: nowrap;
}
.scroll-view-item{height: 300rpx;
}
.scroll-view-item_H{display: inline-block;width: 100%;height: 300rpx;
}

const order = ['demo1', 'demo2', 'demo3']Page({onShareAppMessage() {return {title: 'scroll-view',path: 'page/component/pages/scroll-view/scroll-view'}},data: {toView: 'green'},upper(e) {console.log(e)},lower(e) {console.log(e)},scroll(e) {console.log(e)},scrollToTop() {this.setAction({scrollTop: 0})},tap() {for (let i = 0; i < order.length; ++i) {if (order[i] === this.data.toView) {this.setData({toView: order[i + 1],scrollTop: (i + 1) * 200})break}}},tapMove() {this.setData({scrollTop: this.data.scrollTop + 10})}
})

实现的效果图：

基础内容

1. text 组件

（1）是一个⽂本标签

（2）只能嵌套text

（3）⻓按⽂字可以复制（只有该标签有这个功能）–>selectable

（4） 可以对如: 空格回车 进⾏编码 -->decode

列：通过 text 组件的user-select 属性，可以实现长按选中文本内容的效果。

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

效果图：

2. progress 组件

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

实例代码：

<view class="progress-box"><progress percent="20" show-info stroke-width="3"/>
</view><view class="progress-box"><progress percent="40" active stroke-width="3" /><icon class="progress-cancel" type="cancel"></icon>
</view><view class="progress-box"><progress percent="60" active stroke-width="3" />
</view><view class="progress-box"><progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

效果图：

3. icon组件

图标组件

以下是一个属性说明：

代码实列：

<view class="container"><view class="icon-box"><icon class="icon-box-img" type="success" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">成功</view><view class="icon-box-desc">用于表示操作顺利完成</view></view></view><view class="icon-box"><icon class="icon-box-img" type="info" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view></view></view><view class="icon-box"><icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon><view class="icon-box-ctn"><view class="icon-box-title">普通警告</view><view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view></view></view><view class="icon-box"><icon class="icon-box-img" type="warn" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">强烈警告</view><view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view></view></view><view class="icon-box"><icon class="icon-box-img" type="waiting" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">等待</view><view class="icon-box-desc">用于表示等待，告知用户结果需等待</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="success_no_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_已选择</view><view class="icon-box-desc">用于多选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_未选择</view><view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="warn" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">错误提示</view><view class="icon-box-desc">用于在表单中表示出现错误</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="success" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">单选控件图标_已选择</view><view class="icon-box-desc">用于单选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="download" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">下载</view><view class="icon-box-desc">用于表示可下载</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="info_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于在表单中表示有信息提示</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="cancel" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">停止或关闭</view><view class="icon-box-desc">用于在表单中，表示关闭或停止</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="search" size="14"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">搜索</view><view class="icon-box-desc">用于搜索控件中，表示可搜索</view></view></view></view>

媒体组件

1. image 组件

（1） 图⽚标签，image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应

（2） ⽀持懒加载

（3） mode模式列举:

代码实列：

<view class="page"><view class="page__hd"><text class="page__title">image</text><text class="page__desc">图片</text></view><view class="page__bd"><view class="section section_gap" wx:for="{{array}}" wx:for-item="item"><view class="section__title">{{item.text}}</view><view class="section__ctn"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image></view></view></view>
</view>

Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top：不缩放图片，只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom：不缩放图片，只显示图片的底部区域'}, {mode: 'center',text: 'center：不缩放图片，只显示图片的中间区域'}, {mode: 'left',text: 'left：不缩放图片，只显示图片的左边区域'}, {mode: 'right',text: 'right：不缩放图片，只显示图片的右边边区域'}, {mode: 'top left',text: 'top left：不缩放图片，只显示图片的左上边区域'}, {mode: 'top right',text: 'top right：不缩放图片，只显示图片的右上边区域'}, {mode: 'bottom left',text: 'bottom left：不缩放图片，只显示图片的左下边区域'}, {mode: 'bottom right',text: 'bottom right：不缩放图片，只显示图片的右下边区域'}],src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'},imageError: function(e) {console.log('image3发生error事件，携带值为', e.detail.errMsg)}
})

以上代码可以实现图片的插入。

表单组件

1. button 组件

小程序中的按钮组件类似于HTML中的按钮组件，同时可以调用微信提供的丰富的功能，例如：获取用户信息，获取用户授权，转发等。

例：使用type属性设置按钮的类型：

<button >默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

效果图：

例：使用size属性设置按钮的大小：

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

效果图：

例：使用plain属性设置镂空按钮：

<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

效果图：