小程序开发经验总结

最近一直在做小程序，工作中也遇到了一些问题，踩了一些坑，所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也为刚刚接触小程序的人提供一些思路方法，互相学习，共同进步。

1、微信小程序的目录结构及配置说明

appjson是小程序的全局配置文件，所有配置项key必须使用 双引号括起来 ，value值为字符串类型的也必须使用双引号， 不支持单引号 。

11 pages

pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的 路径+文件名 。每一个页面都是由json、js、wxml、wxss四个文件组成，并且 四个文件的名字必须要一致 。

12   tabBar

tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

13 usingComponents

使用自定义组件或者插件提供的组件前，必须先在这里声明

2、开发微信小程序遇到的问题及解决办法

21 双向绑定

微信小程序不支持通过v-model的方式实现自动双向绑定，需要给表单元素通过绑定事件，并使用thissetData来赋值实现。

22 computed和watch

微信小程序默认是不支持computed和watch的，如需要使用这两项功能，需要安装miniprogram-computed ，安装方法见 官方文档

23 对象赋值

如果给对象的属性赋值，可以使用thissetData({'objkey':value})来赋值，但是如果给某个属性名是变量的属性赋值，通过这种方法是会报错的，经过多次尝试，发现使用如下的方式赋值成功。

let newObj = `obj${key}`

thissetData({

[newObj]: value

})

24 scroll-view

当页面存在d框容器，并且d框里的内容是需要滚动条滚动展示时，如果d框下面那层的容器使用view元素的话，会导致滚动d框内容时，同时会触发d框下面那层的页面容器也会一起滚动，解决此问题可以将d框下面的容器使用scroll-view元素替代view元素

3、小程序测试和发布

由于服务器域名request合法域名每个月 只能修改5次 ，因此在本地开发小程序时，需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。

以上便是此次小程序开发中积累的一些经验，希望能给刚刚接触小程序的人提供一些思路方法，在以后的开发中，如果遇到新的问题，继续更新文档

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。下面简单介绍一下开发入门

一、注册小程序账号

1、进入微信公众平台 2、点击立即注册

3、选择小程序 4、填写信息注册即可 5、绑定开发者 6进入“设置-开发设置”，获取AppID信息。 二、下载微信web开发者工具 1点击小程序后的查看详情 2、选择开发者工具 3、下载对应系统版本的应用程序 4、安装开发工具 三、编写小程序实例 1、打开工具点击小程序项目 2、填写相应信息，点击确定 3、实例目录结构 4、appjs是小程序的脚本代码（必须），可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的 API。 5、appjson是对整个小程序的全局配置（必须），用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的路径+页面名都需要写在appjson的pages中，且pages中的第一个页面是小程序的首页。 6、appwxss是整个小程序的公共样式表（非必须）。 7、indexjs 是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。 8、indexwxml是页面结构文件（必须）。 9、indexwxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖appwxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用appwxss中指定的样式规则。 10、在编辑配置好后点击真机调试 11、手机微信扫描二维码 12、自动d出调试窗口，通过真机调试能够更好的测试小程序

注册开发者账号： >

工具使用教程：

1、网页搜索小程序平台，进入小程序搭建系统，如图1。

2、进入平台右上角点击“注册”按钮，如图2。

3、编辑一个用户名、密码，输入验证码并确认注册协议，如图3。

4、编辑一个小程序名字、录入手机号码和找回密码的邮箱账号，如图4。

5、数字产品类型选择界面，选择小程序，如图5。

6、左侧选择官网或商城，官网为展示型小程序模板。根据行业选择小程序模板，预览模板后，点击选用并点击确认按钮，如图6、图7。

7、点击小程序模板头部区域，d出铅笔图标后，进入编辑框替换logo，该模板logo为透明色，请按照系统提示尺寸进行上传，如图8、图9。

8、鼠标点击首页轮播图，d出铅笔图标后，点击进入编辑框，按照系统提示尺寸，替换如图10、图11和图12。

9、小程序导航数量可以根据实际需求进行增减。如果是商城类小程序，导航分类一般对应产品类型，如图13、图14和图15。

10、上传产品后，鼠标点击商品板块，d出铅笔图标后进去编辑框，设置商品按条件自动调用，该功能配置好以后，新增产品会自动出现在各个对应板块，如图16、图17。

11、首页界面设计完成以后，点击左侧页面、添加栏目按钮继续设计其他页面，比如展示型小程序常用的关于我们、联系我们、品牌特色等页面，在设计过程中，可以从素材、模块里拖拽功能插件到页面里，如图18、图19和图20。

12、到这一步小程序基本设计完成，可以沟通平台协助配置各类系统接口，提交腾讯审核发布。

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

2点击打开小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周边的小程序。

下面的小程序列表可以看到的是我们之前打开过的一些小程序，如果有自己觉得很好用的小程序就可以点击左上角，添加到我的小程序里面。

3微信小程序还有具有搜索功能，打开搜索页面可以输入想要找的小程序。

1 App直接打开小程序功能是怎么 *** 作

2018 年 05 月 19 日，微信官方公布了小程序的新能力，其中最引人关注的是：「小程序上线 App 直接打开小程序功能」。

其实，「App 直接打开小程序」的关键词是 「直接」 两个字。过去，App 可以 「间接」 打开小程序。

比如，你在轻芒杂志 App 里读到一篇好文章，将文章分享给你的「微信好友」一起读，TA 就会收到一张小程序的分享卡片。这样，就相当于 App 间接打开了小程序。

现在，App 可以 「直接」 打开小程序。 对于已经拥有 App 的内容创作者，可以开发一些非常适合微信生态传播的小程序，比如基于内容的答题游戏。

用户可以将答题游戏轻松地分享给微信好友，进行对战，或者进行闯关挑战，从而帮助品牌触达新用户。 两个显而易见的好处 轻芒工程师表示，「App 直接打开小程序」显而易见的好处有两个： 第一，路径缩短。

过去，从 App 打开小程序需要 3 步，现在只需要 1 步。 Before: App → 分享给「微信好友」→「微信好友」收到小程序卡片 → 打开小程序 After: App → 打开小程序 第二：开发成本降低。

过去，「轻芒头脑战」只有小程序的版本，如果 App 要用上头脑战，就需要重新开发；现在，可以从 App 直接跳转到「轻芒头脑战」的小程序，大大降低开发成本。 微信不允许做小程序分发 「App 直接打开小程序」很容易让人想到，那就可以做小程序的分发平台（应用商店）了。

微信当然也想到了，所以做了限制： 一个移动应用只能最多同时绑定 3 个小程序，每月支持绑定 3 次。同一个小程序可被 500 个移动应用关联。

这个规定，用通俗的话来解释就是： 一个小程序可以有 500 个好友（App）。 一个 App 却只能有 3 个好友（小程序），同时每个月都有 3 次机会换好友。

这就意味着一个 App 每月只能打开 3 个小程序，所以还是做不了应用商店，没办法做第三方的分发。 从小程序跳转到 App 呢？ 正所谓，礼尚往来。

从 App 到小程序的事情，我们大概理解了。其实从小程序跳转回 App，微信也是支持的。

但是也做了比较多的限制。简单来说就是，只允许从用户分享的小程序卡片，「原路」跳转回 App，而不能从小程序的任意页面返回 App。

可以看一下「大众点评」的例子：阿禅在大众点评 App 上看到一个好的餐厅，他分享给「微信好友」，「微信好友」打开这个大众点评的小程序卡片，就可以通过「打开 App」按钮，原路返回 App——前提是你的「微信好友」安装了这个 App，所以从小程序跳回 App 的功能和使用场景，目前更适合大部分人手机常备的 App。

2 小程序是怎么做出来的

一、小程序和APP有什么区别 商机，我觉得小程序或是APP都需要一个好的点子+超强的执行力+运气，但是小程序在微信中更易传播、用户进入门槛更低。

只要小程序有意思、有新意很有可能能获取井喷式的用户增长，比如之前的朋友印象、工具类的传图识字等等。区别的话主要是：APP：可无限拓展，较高的自由度，适用于一些功能复杂、对交互、设计有要求的应用，用户可更加方便的长期使用微信小程序：触手可及，用完即走，开发较为简单，但必须依赖于微信很难进行扩展延伸，即功能受限于微信提供的接口，适用于功能单一、低频的应用 如果细分的话也可以从以下几点来说1、起源APP：全称为移动应用程序（mobile application），是设计给只能手机、平板电脑等设备运行的一种应用程序，目前主流的移动设备 *** 作系统为Android和iOS，距离2018年发布已超过十年。

微信小程序：是一种不需要下载安装即可使用的应用，用户通过微信扫一扫或搜一搜即可打开，2017年1月正式上线。2、用户群体APP：面对所有智能手机用户，2017年智能手机用户为26亿。

微信小程序：面对所有微信用户，微信日活超过8亿。3、使用APP：固定在桌面上，随时可用微信小程序：按照最近使用时间倒序排列，使用时需进行扫码/查找4、下载APP：需要从应用商店下载所对应的安装包，才可使用微信小程序：通过微信扫描二维码/扫面小程序码/搜索即可进入小程序直接使用5、功能APP：可实现较为完整的功能微信小程序：因受限于平台仅可实现部分功能，一般小程序功能都较为单一6、适配APP：需要针对不同手机进行适配微信小程序：一次开发可适配所有手机7、开发周期APP：开发成本高，开发周期较长微信小程序：开发成本低，平台已提供较多的接口供使用，开发周期短8、市场APP：中国2017年上线APP为500万左右微信小程序：上线小程序数量58万 二，小程序是如何做出来的，下面我们来看看小程序如何制作。

方法1、微信官方简易教程 我们先来看看微信官网给出的简易教程。起步基础，注册小程序帐号之后，需要安装开发工具，然后在官方开发工具里面输入代码制作。

基础代码构成：JSON 配置：我们可以看到在项目的根目录有一个 appjson 和 projectconfigjson，此外在 pages/logs 目录下还有一个 logsjson，我们依次来说明一下他们的用途。小程序配置 appjson,appjson 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 WXML 模板：从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

WXSS 样式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。

在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 appjson, pagejson 的概念相同，你可以写一个 appwxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 pagewxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器 JS 交互逻辑：一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的 *** 作。

嗯，上面是官方定义的“简易教程”基础中一小部分，对的，简易教程，“简易”。

介绍到这里我已经感觉不到所谓的“简易”二字了。

做完基础还有更高级篇等着你，框架，组件，API，工具。这几个词看着简单，展开的内容足够写几本教科书了。

第二种方法 第三方平台开发小程序 官方教程定义是否简易我们就不做文章解析了，对于一个商家和企业，我做个小程序还需要了解如此多的代码知识。或者有人说，我可以请个程序猿和设计狮，可以，土豪请随意，但是一个程序猿也需要花时间去敲代码，设计。

这一整套制作下来，聪明的人少则一两个月，多着半年，甚至几年都没学会的。在目前竞争如此激烈的社会，我们企业和商家讲究的都是时间就是金钱，同行竞争，抢占先机。

你还会愿意花这么多时间去学习，敲代码，甚至请人提高成本吗？我想你们的回答都是，否。那么那有没有办法可以让我们轻松且快速地制作小程序呢？当然有！我们只需要用到「速成应用」小程序可视化制作工具，马上就可以制作出好看的多功能的全行业的小程序，轻松应对各行各业的应用场景。

下面我们看看如何无需代码基础，轻轻松松制作小程序，教你搞定小程序制作！小程序可视化制作工具的装修界面，可以清晰的看到左边有“页面、组件、模块、模版”等功能。中间是可视化设计界面，右边是设置。

1、组件 组件功能里面可以添加文字、、视频、文章和和商品列表等元素，都可以自。

3 自己怎么做个小程序

说到小程序开发，应该是目前最火的互联网应用。自从小程序上线以来就受到用户和商家的火热追捧，直至现在已经成为互联网最大的流量入口，自开放个人开发者以来，更是大批开发人员一拥而上。至于要如何开发一个微信小程序，首先，微信小程序开发的定义很广，可以是指个人开发，企业开发，也可以是技术代码开发，也可以是第三方技术公司开发。我们首先来理清楚几个问题。

谁可以开发小程序？

微信小程序是腾讯在微信生态下提供的一种不需要下载安装即可使用的应用，类型为企业、 、媒体、其他组织或个人（主体是「个人」的小程序不支持小程序认证，注册时请勿选择「个人」）的开发者，均可申请注册。这两个基础问题清晰之后，我们再来看看如何拥有自己的小程序？

商家一共有两种方式可以拥有自己的小程序：

1第一种为自主开发，商家可以自行找设计师、找产品、找技术，学习微信接口文档，经过漫长的开发周期，不定期的技术接口升级，花费昂贵的开发费用来拥有小程序。虽然开发门槛相对较低，难度不及APP，但自己要开发一个小程序也需要2-3个技术人员耗费数万元以及若干月来实现，且实现后功能需要不断完善迭代，代价较高也耗费精力。

2另一种方式，商家可以使用成熟的小程序商城系统，无需商家自行开发，即可享受专业的技术服务和丰富的营销工具，助力商家轻松获客，更支持商家个性装修及海量模板套用两种装修方法，省心省时。这些商城小程序系统为商家免去了自己开发的繁杂过程，仅需按照注册流程即可快速拥有属于自己的小程序店铺。同时为小程序提供丰富多样的营销功能和展示组件，满足商家的各项场景需求和功能需求。

4 如何制作小程序

制作小程序有以下几种方式：

1、个人开发，这个需要懂得开发技术代码的编写，你想要专职做个人开发或者兴趣开发都是可以，前提是要学好编程开发语言，小程序开发也是一门技术，技艺精湛才能更好带来赚钱

2、找开发公司开发，这个需要设计好小程序的功能和版面，其实和APP是同样的道理，给别人开发当然你得全程跟踪进度，还要测试功能能否正常，最重要的是价格得了解清楚

3、还有一种就是找一个小程序开发平台，他们有模板商城你可以注册进去搭建，支付使用费用，价格有高有低，看哪个平台适合就选择哪个

4、小程序现在正朝着APP的功能改进，目前来讲，小程序还没有达到APP那种样子的，功能和界面，UI设计都还在不断改善之中，不过，事物是向前发展的，小程序开发也是热门，功能会越来越完善，是完全能够做到跟APP功能一样了

5、现在上线了很多小程序，各行各业都有，你打开微信，找到小程序，直接打开附近的小程序就可以看到13个类目下的各种小程序了，现在太热门了，小程序也是多得不得了了。

到demo1-listde的demo1-listdewxml添加输入框和添加按钮

商品名

<input bindinput="getName"></input>

商品价格

<input bindinput="getPrice"></input><!-- 输入框 -->

<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->

1

2

3

4

5

1

2

3

4

5

到demo1-listde的demo1-listdewxss添加输入框和添加按钮的样式

input{

border: 1px solid gray;/ 1像素，实心，灰色 /

width: 200px;

}

1

2

3

4

1

2

3

4

保存运行则得到

在这里插入描述

2到demo1-listde的demo1-listdejs

在页面顶端设置全局模式

let name = ''

let price = ''

1

2

1

2

获取用户输入的商品名和价格

getName(n) {

name= ndetailvalue

},

getPrice(n) {

price= ndetailvalue

},

1

2

3

4

5

6

1

2

3

4

5

6

把用户添加的商品添加到数据库

addGood() {

consolelog('商品名', name)

consolelog('商品价格', price)

1

2

3

1

2

3

为了避免代码重复

把下图请添加描述

改为

getList(){

wxclouddatabase()collection("goods")

get()

then(res=> {

consolelog('列表请求成功',res)

thissetData({//把请求的数据赋值给list

list:resdata

})

})

catch(res=> {

consolelog('列表请求失败',err)

})

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

7

8

9

10

11

12

为添加商品制作一个成功或失败提示d窗

if (name == '') {

wxshowToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wxshowToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

consolelog('请添加商品')

wxclouddatabase()collection('goods')

add({

data:{

name: name,

price: price

}

})

then(res =>{

consolelog('添加成功',res)

thisgetList()

})

catch(res =>{

consolelog('添加失败',err)

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

保存运行即可在小程序页面添加商品和价格

更改商品价格

1，到demo11-details的demo11-detailswxml添加输入框和添加按钮

<view>商品名:{{goodname}},价格：{{goodprice}}</view><!-- viem默认有换行的效果 -->

更新商品价格

<input bindinput="getPrice"></input>

<button type="primary" bindtap="update">更新商品价格</button>

1

2

3

4

1

2

3

4

到demo11-details的demo11-detailswxss添加输入框和添加按钮的样式

input{

border: 1px solid gray;

width: 200px

}

1

2

3

4

1

2

3

4

保存运行得到

在这里插入描述

2到demo11-details的demo11-detailsjs

在页面顶部添加全局模式

let price = ''

var id = ''

1

2

1

2

把onLoad板块改为

onLoad(options) {//列表携带的数据，传递到了onload方法里

consolelog('列表携带的值',options)

id = optionsid

thisgetDetail()

}

1

2

3

4

5

1

2

3

4

5

为避免下面代码出现重复

把下图的代码

在这里插入描述

改为

getDetail() {

wxclouddatabase()collection('goods')

doc(id)

get()

then(res=> {

consolelog('精品课程详情页请求成功',res)

thissetData({

good:resdata

})

})

catch(res=>{

consolelog('精品课程详情页请求失败',err)

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

获取新价格

getPrice(n) {

price=ndetailvalue

}

1

2

3

1

2

3

修改商品的价格

update() {

consolelog('新的商品价格',price)

if (price == '') {

wxshowToast({

icon:'none',

title: '价格为空',

})

} else {

wxclouddatabase()collection('goods')

doc(id)

update({

data:{

price:price

}

})

then(res =>{

consolelog('更新成功',res)

thisgetDetail()

})

catch(res =>{

consolelog('更新失败',err)

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

保存运行即可更改商品的价格

删除商品

1，到demo11-details的demo11-detailswxml添加删除按钮

<button type='primary' bindtap="delete">删除当前商品</button>

1

1

2，到demo11-details的demo11-detailsjs

添加删除商品的代码

delete() {

consolelog('点击了删除键',id)

wxshowModal({

title:'提示',

content:'确定要删除这个商品吗',

success(res) {

if (resconfirm) {

consolelog('确定')

//从数据库删除数据

wxclouddatabase()collection('goods')

doc(id)

remove()

then(res => {

consolelog('删除完成',res)

wxnavigateTo({

url: '/pages/demo1-list/demo1-list',

})

})

catch(res=>{

consolelog('删除失败',err)

})

}else if (rescancel) {

consolelog('取消')

}

}

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

保存运行即可

完成后的全部代码

demo1-listjs

let name = ''

let price = ''

Page({

onLoad(){

thisgetList()

},

//获取列表数据

getList(){

wxclouddatabase()collection("goods")

get()

then(res=> {

consolelog('列表请求成功',res)

thissetData({//把请求的数据赋值给list

list:resdata

})

})

catch(res=> {

consolelog('列表请求失败',err)

})

},

//跳转到精品课程详情页

toDetail(n) {

consolelog('跳转到精品课程详情页的id',ncurrentTargetdatasetid)

wxnavigateTo({

url: '/pages/demo11-details/demo11-detailsid=' + ncurrentTargetdatasetid,//跳转到商品详情页，并携带商品id

})

},

//获取用户输入的商品名和价格

getName(n) {

name= ndetailvalue

},

getPrice(n) {

price= ndetailvalue

},

//添加商品到数据库

addGood() {

consolelog('商品名', name)

consolelog('商品价格', price)

if (name == '') {

wxshowToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wxshowToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

consolelog('请添加商品')

wxclouddatabase()collection('goods')

add({

data:{

name: name,

price: price

}

})

then(res =>{

consolelog('添加成功',res)

thisgetList()

})

catch(res =>{

consolelog('添加失败',err)

})

}

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

demo1-listwxml

商品名

<input bindinput="getName"></input>

商品价格

<input bindinput="getPrice"></input><!-- 输入框 -->

<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->

<view wx:for="{{list}}">

<view bindtap="toDetail" data-id="{{item_id}}">商品名：{{itemname}},价格：{{itemprice}} </view>

</view>

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

demo1-listwxss

input{

border: 1px solid gray;/ 1像素，实心，灰色 /

width: 200px;

}

1

2

3

4

1

2

3

4

demo11-detailsjs

let price = ''

var id = ''

Page({

data:{

good:{}

},

onLoad(options) {//列表携带的数据，传递到了onload方法里

consolelog('列表携带的值',options)

id = optionsid

thisgetDetail()

},

//获取商品的数据

getDetail() {

wxclouddatabase()collection('goods')

doc(id)

get()

then(res=> {

consolelog('精品课程详情页请求成功',res)

thissetData({

good:resdata

})

})

catch(res=>{

consolelog('精品课程详情页请求失败',err)

})

},

//获取新价格

getPrice(n) {

price=ndetailvalue

},

//修改商品价格

update() {

consolelog('新的商品价格',price)

if (price == '') {

wxshowToast({

icon:'none',

title: '价格为空',

})

} else {

wxclouddatabase()collection('goods')

doc(id)

update({

data:{

price:price

}

})

then(res =>{

consolelog('更新成功',res)

thisgetDetail()

})

catch(res =>{

consolelog('更新失败',err)

})

}

},

delete() {

consolelog('点击了删除键',id)

wxshowModal({

title:'提示',

content:'确定要删除这个商品吗',

success(res) {

if (resconfirm) {

consolelog('确定')

//从数据库删除数据

wxclouddatabase()collection('goods')

doc(id)

remove()

then(res => {

consolelog('删除完成',res)

wxnavigateTo({

url: '/pages/demo1-list/demo1-list',

})

})

catch(res=>{

consolelog('删除失败',err)

})

}else if (rescancel) {

consolelog('取消')

}

}

})

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

demo11-detailswxml

<!--pages/demo11-details/demo11-detailswxml-->

<view>商品名:{{goodname}},价格：{{goodprice}}</view><!-- viem默认有换行的效果 -->

更新商品价格

<input bindinput="getPrice"></input>

<button type="primary" bindtap="update">更新商品价格</button>

<button type='primary' bindtap="delete">删除当前商品</button>

demo11-detailswxss

以上就是关于小程序开发经验总结全部的内容，包括:小程序开发经验总结、微信小程序开发入门教程|微信小程序开发主要技术、微信小程序（上）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！