微信小程序——账号及开发工具

最新推荐文章于 2024-08-12 15:03:37 发布

原创最新推荐文章于 2024-08-12 15:03:37 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享 #前端 #前端框架

Web前端专栏收录该内容

44 篇文章

订阅专栏

[点击进入开发文档](()

在这里插入图片描述

进入安装开发工具（稳定版本）

在这里插入图片描述

一路默认下一步进行安装

[](()3. 开发者工具的使用

在这里插入图片描述

使用注册微信小程序的微信号扫码

在这里插入图片描述

登录后点击后面大加号

在这里插入图片描述

项目名称目录为自定义
AppID在微信小程序后台的开发中（下图中复制过来）

在这里插入图片描述

后端服务可自己选择
点击新建项目

[](()4. 项目框架

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200526162544799.png?x-oss-process=image/watermark,type_ZmF 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 uZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)

编辑器部分的文件

在这里插入图片描述

[](()5. 了解代码

change

里面的view就相当于div标签
image可以添加图片 mode属性是设置图片的缩放规则
无论是属性值还是插值都可以使用{{…}}来展示
button按钮中的bindtap注册事件与@click相同 type按钮的样式

[](()5.1 小程序中改变变量的值

Page({

data: {

imgUrl:‘https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590483227&di=ec4ff76460d4478d56b251663ecd4022&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg’

change(){

this.setData({imgUrl:‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590494051074&di=c45128899a0b8fc71464a9329ce5974e&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg’})

}